SSR, test ve üretim

Sunucu tarafı render

Hook değerleri başlangıç değerlerini sunucu markup'ına render eder ve animasyon hidrasyondan sonra sürer. React 18 ve sonrası kararlı değişken adları için useId kullanır; React 16 ve 17 sunucularında bir id verin.

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

Eski React'te kararlı id'ler

Yalnızca React 16 ya da 17 ile sunucu tarafı render yaparken gerekir.

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

Güvenebileceğiniz temizlik

Bir bileşenin sahip olduğu her şey onunla birlikte serbest bırakılır.

• useAnimated, useAnimatedValue, useTimeline ve useReorder ayrılınca denetleyicilerini ve listener'larını durdurur.
• useAnimated factory'sinde bildirilen denetleyiciler ve girdiler bir bağımlılık değişince birlikte değiştirilir.
• Animated.Keep ayrılan çocukları hareketlerinden sonra kaldırır ve yeni bir pose geçerli konumdan keser.
• React dışında bind, bindOutput, createTimeline ve createLayoutScene açık bir dispose döndürür.

Test

flushAnimatedUpdates() bekleyen çıktıyı senkron olarak uygular; böylece belirlenimci testler DOM üzerinde doğrulama yapabilir.

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

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

Metin, öznitelikler ve özellikler

useAnimated içindeki output(target, mapping) bir stil, öznitelik, metin ya da nesne özelliği çıktısının sahibidir. bindOutput aynı eşlemeyi hemen bağlar ve flush ile dispose döndürür.

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