SSR, testavimas ir gamyba

Serverio atvaizdavimas

hook reikšmės atvaizduoja savo pradinę reikšmę į serverio markup, o animacija tęsiasi po hidratacijos. React 18 ir naujesni stabiliems kintamųjų pavadinimams naudoja useId; React 16 ir 17 serveriuose perduokite 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>
  );
}

Stabilūs id senesniame React

Reikia tik atvaizduojant serveryje su React 16 arba 17.

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

Tvarkymas, kuriuo galite pasikliauti

Viskas, ką valdo komponentas, atlaisvinama kartu su juo.

• useAnimated, useAnimatedValue, useTimeline ir useReorder atjungiant sustabdo savo valdiklius ir listener.
• useAnimated factory aprašyti valdikliai ir įvestys pasikeitus priklausomybei pakeičiami kartu.
• Animated.Keep pašalina išeinančius vaikus po jų judesio, o nauja poza pertraukia nuo dabartinės padėties.
• Už React ribų bind, bindOutput, createTimeline ir createLayoutScene grąžina aiškų dispose.

Testavimas

flushAnimatedUpdates() sinchroniškai pritaiko laukiančią išvestį, kad deterministiniai testai galėtų tikrinti DOM.

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

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

Tekstas, atributai ir savybės

output(target, mapping) useAnimated viduje valdo stiliaus, atributo, teksto ar objekto savybės išvestį. bindOutput tą patį susiejimą prijungia iškart ir grąžina flush bei 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} />;