SSR, έλεγχοι και παραγωγή

Απόδοση στον διακομιστή

Οι τιμές hooks αποδίδουν την αρχική τους τιμή στο markup του διακομιστή και η κίνηση συνεχίζεται μετά το 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>
  );
}

Σταθερά id σε παλαιότερο React

Χρειάζεται μόνο για απόδοση στον διακομιστή με React 16 ή 17.

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

Καθαρισμός στον οποίο μπορείτε να βασιστείτε

Ό,τι κατέχει ένα component απελευθερώνεται μαζί του.

• Τα useAnimated, useAnimatedValue, useTimeline και useReorder σταματούν τους ελεγκτές και τους listeners τους κατά την αποπροσάρτηση.
• Οι ελεγκτές και οι είσοδοι που δηλώνονται σε factory του useAnimated αντικαθίστανται μαζί όταν αλλάζει μια εξάρτηση.
• Το Animated.Keep αφαιρεί τα παιδιά που φεύγουν μετά την κίνησή τους και ένα νέο pose διακόπτει από την τρέχουσα θέση.
• Εκτός React, τα bind, bindOutput, createTimeline και createLayoutScene επιστρέφουν ρητό dispose.

Έλεγχοι

Το flushAnimatedUpdates() εφαρμόζει σύγχρονα την εκκρεμή έξοδο, ώστε τα ντετερμινιστικά τεστ να μπορούν να ελέγχουν το DOM.

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

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

Κείμενο, χαρακτηριστικά και ιδιότητες

Το output(target, mapping) μέσα στο useAnimated κατέχει μια έξοδο στυλ, χαρακτηριστικού, κειμένου ή ιδιότητας αντικειμένου. Το 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} />;