SSR, testaus ja tuotanto

Palvelinrenderöinti

Hookien arvot renderöivät alkuarvonsa palvelimen markupiin, ja animaatio jatkuu hydraation jälkeen. React 18 ja uudemmat käyttävät useId-hookia vakaisiin muuttujanimiin; React 16- ja 17-palvelimilla anna 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>
  );
}

Vakaat id:t vanhemmassa Reactissa

Tarvitaan vain palvelinrenderöinnissä React 16:lla tai 17:llä.

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

Siivous, johon voit luottaa

Kaikki, mitä komponentti omistaa, vapautetaan sen mukana.

• useAnimated, useAnimatedValue, useTimeline ja useReorder pysäyttävät ohjaimensa ja listenerinsä irrotettaessa.
• useAnimated-factoryssa määritellyt ohjaimet ja syötteet korvataan yhdessä riippuvuuden muuttuessa.
• Animated.Keep poistaa poistuvat lapset niiden liikkeen jälkeen, ja uusi asento keskeyttää nykyisestä sijainnista.
• Reactin ulkopuolella bind, bindOutput, createTimeline ja createLayoutScene palauttavat nimenomaisen dispose-funktion.

Testaus

flushAnimatedUpdates() soveltaa odottavan tuloksen synkronisesti, jotta deterministiset testit voivat tarkistaa DOMin.

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

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

Teksti, attribuutit ja ominaisuudet

useAnimated-kutsun sisällä oleva output(target, mapping) omistaa tyyli-, attribuutti-, teksti- tai objektin ominaisuustuloksen. bindOutput liittää saman kuvauksen heti ja palauttaa flush- ja dispose-funktiot.

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