SSR การทดสอบ และโปรดักชัน

การเรนเดอร์ฝั่งเซิร์ฟเวอร์

ค่าของ hook จะเรนเดอร์ค่าเริ่มต้นลงใน markup ฝั่งเซิร์ฟเวอร์ และแอนิเมชันจะทำต่อหลัง hydration 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 หยุดตัวควบคุมและ listener เมื่อ unmount
• ตัวควบคุมและอินพุตที่ประกาศใน factory ของ useAnimated จะถูกแทนที่พร้อมกันเมื่อ dependency เปลี่ยน
• Animated.Keep นำ children ที่กำลังออกออกหลังการเคลื่อนไหวจบ และ pose ใหม่จะขัดจังหวะจากตำแหน่งปัจจุบัน
• นอก 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} />;