SSR, kiểm thử và sản phẩm thực tế

Render phía máy chủ

Giá trị hook render giá trị ban đầu vào markup máy chủ, và hoạt ảnh tiếp tục sau khi hydrate. React 18 trở lên dùng useId cho tên biến ổn định; trên máy chủ React 16 và 17, hãy truyền 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 ổn định trên React cũ

Chỉ cần khi render phía máy chủ với React 16 hoặc 17.

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

Dọn dẹp mà bạn có thể tin cậy

Mọi thứ component sở hữu đều được giải phóng cùng với nó.

• useAnimated, useAnimatedValue, useTimeline và useReorder dừng bộ điều khiển và listener khi unmount.
• Bộ điều khiển và đầu vào khai báo trong factory của useAnimated được thay cùng nhau khi phụ thuộc thay đổi.
• Animated.Keep gỡ các children đang rời đi sau chuyển động của chúng, và một pose mới sẽ ngắt từ vị trí hiện tại.
• Bên ngoài React, bind, bindOutput, createTimeline và createLayoutScene trả về một dispose tường minh.

Kiểm thử

flushAnimatedUpdates() áp dụng đồng bộ các đầu ra đang chờ để test tất định có thể kiểm tra DOM.

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

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

Văn bản, thuộc tính HTML và thuộc tính đối tượng

output(target, mapping) bên trong useAnimated sở hữu một đầu ra kiểu dáng, thuộc tính HTML, văn bản hoặc thuộc tính đối tượng. bindOutput gắn ngay cùng ánh xạ đó và trả về flush và 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} />;