מדריכים · 09

SSR, בדיקות וייצור

רינדור בשרת, hydration, בדיקות וכללי הניקוי שאפשר לסמוך עליהם.

רינדור בשרת

ערכי hooks מרנדרים את הערך ההתחלתי שלהם ל־markup של השרת, והאנימציה ממשיכה אחרי ה־hydration. React 18 ומעלה משתמשים ב־useId לשמות משתנים יציבים; בשרתים עם React 16 ו־17 העבירו id.

app/layout.jsx

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.

ssr.jsx

// 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 מסיר ילדים יוצאים אחרי התנועה שלהם, ו־pose חדש מפריע מהמיקום הנוכחי.
מחוץ ל־React, bind, bindOutput, createTimeline ו־createLayoutScene מחזירים dispose מפורש.

בדיקות

flushAnimatedUpdates() מחיל פלט ממתין באופן סינכרוני כדי שבדיקות דטרמיניסטיות יוכלו לבדוק את ה־DOM.

Meter.test.jsx

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.

Counter.jsx

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