SSR, టెస్టింగ్, ప్రొడక్షన్

సర్వర్ రెండరింగ్

హుక్ విలువలు తమ ప్రారంభ విలువను సర్వర్ మార్కప్‌లో రెండర్ చేస్తాయి; hydration తర్వాత యానిమేషన్ కొనసాగుతుంది. React 18 మరియు కొత్తవి స్థిరమైన వేరియబుల్ పేర్ల కోసం useId వాడతాయి; React 16, 17 సర్వర్‌లలో 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>
  );
}

పాత React-లో స్థిరమైన id-లు

React 16 లేదా 17‌తో సర్వర్ రెండరింగ్ చేసినప్పుడు మాత్రమే అవసరం.

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

మీరు నమ్మగల శుభ్రత

ఒక కాంపోనెంట్‌కు చెందినదంతా దానితో పాటు విడుదలవుతుంది.

• useAnimated, useAnimatedValue, useTimeline, useReorder అన్‌మౌంట్‌పై తమ కంట్రోలర్‌లను, listener-లను ఆపుతాయి.
• useAnimated factory-లో ప్రకటించిన కంట్రోలర్‌లు, ఇన్‌పుట్‌లు ఆధారం మారినప్పుడు కలిసి భర్తీ చేయబడతాయి.
• Animated.Keep నిష్క్రమించే పిల్లలను వారి మోషన్ తర్వాత తీసివేస్తుంది; కొత్త pose ప్రస్తుత స్థానం నుండి అంతరాయం కలిగిస్తుంది.
• React బయట, bind, bindOutput, createTimeline, createLayoutScene స్పష్టమైన dispose-ను ఇస్తాయి.

టెస్టింగ్

flushAnimatedUpdates() పెండింగ్ అవుట్‌పుట్‌ను synchronous‌గా వర్తింపజేస్తుంది; అందువల్ల నిర్ణీత టెస్టులు DOM-ను తనిఖీ చేయగలవు.

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

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

టెక్స్ట్, attribute-లు, ప్రాపర్టీలు

useAnimated లోపల output(target, mapping) style, attribute, టెక్స్ట్ లేదా ఆబ్జెక్ట్-ప్రాపర్టీ అవుట్‌పుట్‌ను నిర్వహిస్తుంది. bindOutput అదే మ్యాపింగ్‌ను వెంటనే జోడించి flush, 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} />;