SSR, சோதனை, production

சர்வர் ரெண்டரிங்

ஹூக் மதிப்புகள் தங்கள் தொடக்க மதிப்பைச் சர்வர் மார்க்அப்பில் ரெண்டர் செய்கின்றன; 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 அதே mapping-ஐ உடனே இணைத்து 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} />;