SSR, testare și producție

Randare pe server

Valorile de hook își randează valoarea inițială în markup-ul serverului, iar animația continuă după hidratare. React 18 și mai nou folosesc useId pentru nume stabile de variabile; pe serverele React 16 și 17, transmiteți un 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>
  );
}

id-uri stabile în React mai vechi

Necesar doar la randarea pe server cu React 16 sau 17.

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

Curățare pe care vă puteți baza

Tot ce deține o componentă este eliberat odată cu ea.

• useAnimated, useAnimatedValue, useTimeline și useReorder își opresc controlerele și listenerii la demontare.
• Controlerele și intrările declarate într-un factory useAnimated sunt înlocuite împreună când se schimbă o dependență.
• Animated.Keep elimină copiii care pleacă după mișcarea lor, iar o poză nouă întrerupe de la poziția curentă.
• În afara React, bind, bindOutput, createTimeline și createLayoutScene returnează un dispose explicit.

Testare

flushAnimatedUpdates() aplică sincron ieșirea în așteptare, ca testele deterministe să poată verifica DOM-ul.

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

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

Text, atribute și proprietăți

output(target, mapping) în useAnimated deține o ieșire de stil, atribut, text sau proprietate de obiect. bindOutput atașează imediat aceeași mapare și returnează 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} />;