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