SSR, testovanie a produkcia

Renderovanie na serveri

Hodnoty hookov renderujú svoju predvolenú hodnotu do serverového markupu a animácia po hydratácii pokračuje. React 18 a novší používa pre stabilné názvy premenných useId; na serveroch s React 16 a 17 odovzdajte 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>
  );
}

Stabilné id v starších verziách Reactu

Potrebné len pri renderovaní na serveri s React 16 alebo 17.

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

Upratovanie, na ktoré sa môžete spoľahnúť

Všetko, čo komponent vlastní, sa uvoľní spolu s ním.

• useAnimated, useAnimatedValue, useTimeline a useReorder pri odpojení zastavia svoje controllery a poslucháčov.
• Controllery a vstupy deklarované vo factory useAnimated sa pri zmene závislosti nahradia spoločne.
• Animated.Keep odstráni odchádzajúcich potomkov po ich pohybe a nová póza preruší pohyb od aktuálnej polohy.
• Mimo React vracajú bind, bindOutput, createTimeline a createLayoutScene explicitné dispose.

Testovanie

flushAnimatedUpdates() synchrónne použije čakajúci výstup, aby deterministické testy mohli overovať DOM.

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

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

Text, atribúty a vlastnosti

output(target, mapping) vnútri useAnimated vlastní výstup do štýlu, atribútu, textu alebo vlastnosti objektu. bindOutput rovnaké mapovanie pripojí hneď a vracia flush a 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} />;