SSR, testiranje in produkcija

Upodabljanje na strežniku

Vrednosti hookov upodobijo svojo začetno vrednost v strežniški markup, animacija pa se po hidraciji nadaljuje. React 18 in novejši za stabilna imena spremenljivk uporablja useId; na strežnikih z Reactom 16 in 17 podajte 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>
  );
}

Stabilni id-ji v starejšem Reactu

Potrebno le pri upodabljanju na strežniku z Reactom 16 ali 17.

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

Čiščenje, na katerega se lahko zanesete

Vse, kar ima komponenta v lasti, se sprosti skupaj z njo.

• useAnimated, useAnimatedValue, useTimeline in useReorder ob odklopu ustavijo svoje krmilnike in poslušalce.
• Krmilniki in vnosi, deklarirani v factoryju useAnimated, se zamenjajo skupaj, ko se odvisnost spremeni.
• Animated.Keep odstrani otroke, ki odhajajo, po njihovem gibanju, nova poza pa prekine od trenutnega položaja.
• Zunaj Reacta bind, bindOutput, createTimeline in createLayoutScene vrnejo izrecen dispose.

Testiranje

flushAnimatedUpdates() sinhrono uveljavi čakajoče izhode, da lahko deterministični testi preverjajo DOM.

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

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

Besedilo, atributi in lastnosti

output(target, mapping) znotraj useAnimated ima v lasti izhod v slog, atribut, besedilo ali lastnost objekta. bindOutput isto preslikavo pripne takoj in vrne flush in 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} />;