SSR, тестване и продукция

Рендериране на сървъра

Стойностите на hooks рендерират началната си стойност в сървърната разметка, а анимацията продължава след хидратация. 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' });

Почистване, на което можете да разчитате

Всичко, което компонентът притежава, се освобождава заедно с него.

• useAnimated, useAnimatedValue, useTimeline и useReorder спират контролерите и слушателите си при демонтиране.
• Контролерите и входовете, декларирани във factory на useAnimated, се заменят заедно при промяна на зависимост.
• Animated.Keep премахва излизащите деца след движението им, а нова поза прекъсва от текущата позиция.
• Извън 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} />;