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