SSR, testy i produkcja

Renderowanie na serwerze

Wartości hooków renderują wartość początkową w znacznikach serwera, a animacja trwa dalej po hydratacji. React 18 i nowsze używają useId dla stabilnych nazw zmiennych; na serwerach z React 16 i 17 przekaż id.

import { AnimatedProvider } from '@kkwaenggwari/animated';

// The package entry is marked 'use client'. A server layout can render the
// provider directly; hooks and Animated.<tag> go inside Client Components.
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AnimatedProvider>{children}</AnimatedProvider>
      </body>
    </html>
  );
}

Stabilne id w starszym React

Potrzebne tylko przy renderowaniu na serwerze z React 16 lub 17.

// React 18+ uses useId automatically. On React 16/17 servers, pass a stable id.
const progress = useAnimatedValue(0, { id: 'hero-progress' });

Sprzątanie, na którym możesz polegać

Wszystko, co posiada komponent, jest zwalniane razem z nim.

• useAnimated, useAnimatedValue, useTimeline i useReorder zatrzymują swoje kontrolery i słuchaczy przy odmontowaniu.
• Kontrolery i wejścia zadeklarowane w fabryce useAnimated są zastępowane razem, gdy zmienia się zależność.
• Animated.Keep usuwa odchodzące dzieci po ich ruchu, a nowa poza przerywa od bieżącej pozycji.
• Poza React bind, bindOutput, createTimeline i createLayoutScene zwracają jawne dispose.

Testy

flushAnimatedUpdates() stosuje oczekujące wyjście synchronicznie, żeby deterministyczne testy mogły sprawdzać DOM.

import { flushAnimatedUpdates } from '@kkwaenggwari/animated';

act(() => progress.setValue(0.5));
flushAnimatedUpdates();
// Pending style writes are applied now; assert on the DOM.

Tekst, atrybuty i właściwości

output(target, mapping) wewnątrz useAnimated posiada wyjście do stylu, atrybutu, tekstu lub właściwości obiektu. bindOutput od razu podłącza to samo mapowanie i zwraca flush i dispose.

const label = useRef(null);

const count = useAnimated(
  0,
  (value) => {
    output(label, { text: new AnimatedComputed([value], (v) => `${Math.round(v * 100)}%`) });
    timing(value, { toValue: 1, duration: 1200 });
  },
  [],
);

<span ref={label} />;