SSR, tesztelés és éles üzem

Szerveroldali renderelés

A hookértékek a kezdőértéküket a szerver markupjába renderelik, az animáció pedig a hidratálás után folytatódik. A React 18 és újabb a stabil változónevekhez useId-t használ; React 16 és 17 szervereken adjon meg egy id-t.

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>
  );
}

Stabil id-k régebbi Reactben

Csak React 16 vagy 17 melletti szerveroldali rendereléshez szükséges.

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

Takarítás, amelyre támaszkodhat

Minden, amit egy komponens birtokol, vele együtt felszabadul.

• A useAnimated, a useAnimatedValue, a useTimeline és a useReorder leválasztáskor leállítja a vezérlőit és listenereit.
• A useAnimated factoryjában deklarált vezérlők és bemenetek függőségváltozáskor együtt cserélődnek.
• Az Animated.Keep a mozgásuk után eltávolítja a távozó gyermekeket, egy új póz pedig az aktuális pozíciótól szakít meg.
• A Reacten kívül a bind, a bindOutput, a createTimeline és a createLayoutScene kifejezett dispose függvényt ad vissza.

Tesztelés

A flushAnimatedUpdates() szinkron alkalmazza a függő kimenetet, így a determinisztikus tesztek ellenőrizhetik a DOM-ot.

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

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

Szöveg, attribútumok és tulajdonságok

A useAnimated-en belüli output(target, mapping) egy stílus-, attribútum-, szöveg- vagy objektumtulajdonság-kimenetet birtokol. A bindOutput azonnal csatolja ugyanazt a leképezést, és flush-t meg dispose-t ad vissza.

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} />;