SSR, Tests und Produktion

Server-Rendering

Hook-Werte rendern ihren Anfangswert ins Server-Markup, und die Animation läuft nach der Hydration weiter. React 18 und neuer nutzen useId für stabile Variablennamen; auf Servern mit React 16 und 17 übergibst du eine 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>
  );
}

Stabile ids in älterem React

Nur nötig beim Server-Rendering mit React 16 oder 17.

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

Aufräumen, auf das du dich verlassen kannst

Alles, was eine Komponente besitzt, wird mit ihr freigegeben.

• useAnimated, useAnimatedValue, useTimeline und useReorder stoppen ihre Controller und Listener beim Unmount.
• In einer useAnimated-Factory deklarierte Controller und Eingaben werden gemeinsam ersetzt, wenn sich eine Abhängigkeit ändert.
• Animated.Keep entfernt abgehende Kinder nach ihrer Bewegung, und eine neue Pose unterbricht ab der aktuellen Position.
• Außerhalb von React geben bind, bindOutput, createTimeline und createLayoutScene ein explizites dispose zurück.

Tests

flushAnimatedUpdates() wendet ausstehende Ausgaben synchron an, damit deterministische Tests das DOM prüfen können.

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

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

Text, Attribute und Eigenschaften

output(target, mapping) in useAnimated besitzt eine Style-, Attribut-, Text- oder Objekt-Eigenschafts-Ausgabe. bindOutput hängt dasselbe Mapping sofort an und gibt flush und dispose zurück.

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