שימוש חוזר בלוגיקה עם ווים מותאמים

ווים מותאמים אישית: שיתוף היגיון בין רכיבים

תארו לעצמכם שאתם מפתחים אפליקציה שנשענת במידה רבה על הרשת (כמו שרוב האפליקציות עושות). אתה רוצה להזהיר את המשתמש אם חיבור הרשת שלו כבה בטעות בזמן שהוא השתמש באפליקציה שלך. איך היית מתנהלת? נראה שתצטרך שני דברים ברכיב שלך:

1. פיסת state שעוקבת אחר האם הרשת מקוונת.
2. אפקט שנרשם לאירועים הגלובליים מקוון ו-offline.

זה ישמור את הרכיב שלך מסונכרן עם סטטוס הרשת. אתה יכול להתחיל עם משהו כזה:

נסה להפעיל ולכבות את הרשת שלך, ושם לב איך ‘סרגל הstate’ הזה מתעדכן בתגובה שלך לפעולות.

עכשיו דמיינו שאתם גם רוצים להשתמש באותו היגיון ברכיב אחר. ברצונך ליישם כפתור שמירה שיהפוך לבלתי זמין ויראה “מתחבר מחדש…” במקום “שמור” בזמן שהרשת כבויה.

כדי להתחיל, אתה יכול להעתיק את המצב isOnline ואת האפקט לתוך SaveButton:

ודא שאם תכבה את הרשת, הכפתור ישנה את מראהו.

שני הרכיבים האלה עובדים מצוין, אבל הכפילות בלוגיקה ביניהם היא מצערת. נראה שלמרות שיש להם מראה חזותי שונה, אתה רוצה לעשות שימוש חוזר בהיגיון ביניהם.

חילוץ Hook מותאם אישית משלך גורם

תארו לעצמכם לרגע שבדומה ל-useState ו-useEffect, היה Hook של useOnlineStatus מובנה. אז ניתן יהיה לפשט את שני הרכיבים הללו ולהסיר את הכפילות ביניהם:

function StatusBar() {
  const isOnline = useOnlineStatus();
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>;
}

function SaveButton() {
  const isOnline = useOnlineStatus();

  function handleSaveClick() {
    console.log('✅ Progress saved');
  }

  return (
    <button disabled={!isOnline} onClick={handleSaveClick}>
      {isOnline ? 'Save progress' : 'Reconnecting...'}
    </button>
  );
}

למרות שאין Hook מובנה כזה, אתה יכול לכתוב את זה בעצמך. הכריז על פונקציה בשם useOnlineStatus והעבר לתוכה את כל הקוד המשוכפל מהרכיבים שכתבת קודם:

function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);
  return isOnline;
}

בסוף הפונקציה, החזר isOnline. זה יכול לרכיבים שלך לקרוא את הערך הזה:

ודא כי הפעלה וכיבוי של הרשת מעדכנת את שני הרכיבים.

כעת לרכיבים שלך אין כל כך הרבה היגיון חוזר. חשוב מכך, הקוד בתוכם מתאר מה הם רוצים לעשות (השתמשו בסטטוס המקוון!) במקום איך לעשות זאת (על ידי הרשמה לאירועי הדפדפן).

כאשר אתה מחלץ היגיון לתוך Hooks מותאמים אישית, אתה יכול להסתיר את הפרטים המסובים של איך אתה מתמודד עם מערכת חיצונית או API של דפדפן. הקוד של הרכיבים שלך מבטא את הכוונתך, לא את היישום.

שמות Hook תמיד מתחילים ב-use

ישומי React בנויים מהנים. רכיבים בנויים מ-Hooks, בין אם מובנים או מותאמים אישית. סביר להניח שלעתים קרובות תשתמש ב-Hooks מותאמים אישיים אישיים על ידי אחרים, אבל לפעמים אתה יכול לכתוב אחד בעצמך!

עליך לפעול לפי מוסכמות השמות הבאות:

1. שמות רכיבי React חייבים להתחיל באות גדולה, כמו ‘StatusBar’ ו-‘SaveButton’. משהו רכיבי React צריכים גם להחזיר שראקט יודע להציג, כמו חתיכת JSX.
2. שמות Hook חייבים להתחיל ב-use ואחריו באות גדולה, כמו useState (מובנה) או useOnlineStatus (מותאם אישית, כמו קודם בדף). הHooks להחזיר ערכים שרירותיים.

מוסכמה זו מבטיחה שתמיד תוכל להסתכל על רכיב ולדעת היכן מצבו, אפקטים ושאר תכונות React עשויות “להסתתר”. לדוגמה, אם אתה רואה את פעולות היצירה getColor() בתוך הרכיב שלך, אתה יכול להיות בטוח שהיא לא יכולה להכיל מצב React בפנים כי השם שלה לא מתחיל ב-use. עם זאת, קריאת פונקציה כמו useOnlineStatus() תכיל ככל הנראה קריאות ל-Hooks אחרים בפנים!

// 🔴 Avoid: A Hook that doesn't use Hooks
function useSorted(items) {
  return items.slice().sort();
}

// ✅ Good: A regular function that doesn't use Hooks
function getSorted(items) {
  return items.slice().sort();
}

function List({ items, shouldSort }) {
  let displayedItems = items;
  if (shouldSort) {
    // ✅ It's ok to call getSorted() conditionally because it's not a Hook
    displayedItems = getSorted(items);
  }
  // ...
}

// ✅ Good: A Hook that uses other Hooks
function useAuth() {
  return useContext(Auth);
}

// ✅ Good: A Hook that will likely use some other Hooks later
function useAuth() {
  // TODO: Replace with this line when authentication is implemented:
  // return useContext(Auth);
  return TEST_USER;
}

ווים מותאמים מאפשרים לך לשתף את היגיון מצבי, לא להגדיר את עצמו

בדוגמה הקודמת, בעת הפעלת וכיבית את הרשת, שני הרכיבים עודכנו יחד. עם זאת, זה לא נכון שמשתנה מצב ‘isOnline’ יחיד שותף ביניהם. תסתכל על הקוד הזה:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

זה עובד באותו אופן כמו לפני שחילצת את הכפילות:

function StatusBar() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

function SaveButton() {
  const [isOnline, setIsOnline] = useState(true);
  useEffect(() => {
    // ...
  }, []);
  // ...
}

אלו שני משתני מצב ואפקטים בלתי תלויים לחלוטין! במקרה היה להם אותו ערך בו-זמנית כי סינכרנתם אותם עם אותו ערך חיצוני (בין אם הרשת מופעלת).

כדי להמחיש זאת טוב יותר, נצטרך דוגמה אחרת. שקול את רכיב ה’טופס’ הזה:

יש היגיון שחוזר על עצמו עבור כל שדה טופס:

1. יש פיסת state (שם פרטי ושם משפחה).
2. יש למטפל בשינוי (handleFirstNameChange ו-handleLastNameChange).
3. יש קטע של JSX שמציין את התכונה ‘ערך’ ו-‘onChange’ עבור הקלט הזה.

אתה יכול לחלץ את ההיגיון החוזר על ה-Hook המותאם האישי של ‘useFormInput’:

שימו לב שהוא מכריז רק על משתנה מצב אחד בשם ‘ערך’.

עם זאת, הרכיב ‘Form’ קורא ‘useFormInput’ פעמיים:

function Form() {
  const firstNameProps = useFormInput('Mary');
  const lastNameProps = useFormInput('Poppins');
  // ...

זו הסיבה שזה עובד כמו הכרזה על שני משתני מצב נפרדים!

Custom Hooks מאפשרים לך לשתף היגיון מצבי אבל לא לציין את עצמו. כל קריאה ל-Hook עצמאית לחלוטין מכל קריאה אחרת לאותו Hook. זו מחפשת ששתי ארגזי החול שלמעלה שוות לחלוטין. אם תרצה, חזרה למעלה והשווה בין גלובל. ההתנהגות לפני ואחרי חילוץ Hook מותאם אישית זהה.

כאשר אתה צריך לחלק את הstate עצמו בין רכיבים מרובים, הרם אותו והעביר אותו למטה במקום זאת.

העברת ערכים תגוב ביןתיים Hooks

הקוד בתוך Hooks המותאמים האישיים שלך יפעל מחדש כל רינדור מחדש של הרכיב שלך. זו הסיבה, כמו רכיבים, Hooks מותאמים אישית צריכים להיות טהורים. חשבו על הקוד המותאם האישי של Hooks כחלק מגוף הרכיב שלכם!

מה שה-Hooks מותאמים מעבדים אישיים מחדש יחד עם הרכיב שלך, הם תמיד מקבלים את הprops וstate העדכניות ביותר. כדי לראות מה זה אומר, שקול את הדוגמה הזו לחדר צ’אט. שנה את כתובת האתר של השרת או את חדר הצ’אט:

כאשר אתה משנה serverUrl או roomId, האפקט “מגיב” לשינויים שלך ומסתנכרן מחדש. אתה יכול לראות לפי הודעות המסוף שהצ’אט מתחבר מחדש בכל פעם שאתה משנה את התלות של האפקט שלך.

העבר את הקוד של האפקט ל-Hook מותאם אישית:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

זה יכול לרכיב ChatRoom שלך לקרוא ל-Hook המותאם אישית שלך לבד לדאוג איך זה עובד בפנים:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });

  return (
    <>
      <label>
        Server URL:
        <input value={serverUrl} onChange={e => setServerUrl(e.target.value)} />
      </label>
      <h1>Welcome to the {roomId} room!</h1>
    </>
  );
}

זה נראה הרבה יותר פשוט! (אבל זה עושה את אותו הדבר.)

שימו לב שההיגיון עדיין מגיב לשינויי תמיכה וstate. נסה לערוך את כתובת האתר של השרת או את החדר שנבחר:

שים לב איך אתה לוקח את הערך ההחזר של Hook אחד:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

והעבירו אותו כקלט לHook אחר:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl
  });
  // ...

בכל פעם שרכיב שלך ChatRoom מעבד מחדש, הוא מעביר את roomId ואת serverUrl העדכניים ביותר ל-Hook שלך. אתה מתחבר מחדש לצ’אט בכל פעם שהערכים שלהם שונים לאחר עיבוד מחדש. (אם אי פעם עבדת עם תוכנת עיבוד אודיו או וידאו, שרשור Hooks כזה עשוי להזכיר לך שרשור אפקטים ויזואליים או אודיו. זה כאילו הפלט של useState “מוזן” לקלט של useChatRoom.)

מטפלי אירועים ל-Hooks מותאמים אישית

ככל שתתחיל להשתמש ב-‘useChatRoom’ ברכיבים נוספים, אולי תרצה לאפשר לרכיבים להתאים אישית את ההתנהגות שלו. לדוגמה, נכון לעכשיו, ההיגיון של מה לעשות כשמגיעה הודעה מקודד בתוך ה-Hook:

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

נניח שאתה רוצה להעביר את ההיגיון הזה בחזרה לרכיב שלך:

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('New message: ' + msg);
    }
  });
  // ...

כדי לגרום לזה לעבוד, שנה את ה-Hook המותאם האישי שלך כדי לקחת את ‘onReceiveMessage’ כאחת מהאפשרויות הנקראות שלו:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ✅ All dependencies declared
}

זה יעבוד, אבל יש עוד שיפור אחד שאתה יכול לעשות כאשר ה-Hook המותאם האישי שלך מקבל מטפל אירועים.

הוספת תלות ב-‘onReceiveMessage’ אינה אידיאלית שהיא תגרום לצ’אט להתחבר מחדש בכל פעם שהרכיב מעבד מחדש. עטפו את הטיפול הזה לתוך אירוע אפקט כדי להוציא מהתלות:

import { useEffect, useEffectEvent } from 'react';
// ...

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);

  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ✅ All dependencies declared
}

עכשיו הצ’אט לא יתחבר מחדש בכל פעם שרכיב ChatRoom מעבד מחדש. הנה הדגמה עובדת מלאה של העברת מטפל באירועים לHook מותאם אישית לשחק איתו:

שים לב איך אתה כבר לא צריך לדעת איך useChatRoom עובד כדי להשתמש בו. אתה יכול להוסיף אותו לכל רכיב אחר, להעביר כל אופציה אחרת, וזה יעבוד באותה צורה. זה הכוח של הHooks מותאמים אישית.

מתי להשתמש ב-Hooks מותאמים אישית

אינך צריך לחלץ Hook מותאם אישית עבור כל פיסת קוד משוכפלת קטנה. כמה כפילות זה בסדר. לדוגמה, חילוץ useFormInput Hook כדי לכרוך קריאת useState בודדת כמו קודם הוא כנראה מיותר.

עם זאת, בכל פעם שאתה כותב אפקט, שקול אם יהיה ברור יותר לתווף אותו גם בHook מותאם אישית. לא צריך אפקטים קרובות מאוד, אז אם אתה כותב אחד, זה אומר שאתה צריך “לצאת מחוץ ל-React” כדי להסתנכרן עם מערכת חיצונית או לעשות משהו של-React אין API מובנה עבור. תעביר אותו לתוך Hook מותאם אישית יכול לך לתקשר במדויק את הכוונתך.

לדוגמה, שקול רכיב ShippingForm המציג שתי תפריטים נפתחים: אחד מציג את רשימת הערים, ומציג את רשימת האזורים בעיר שנבחרה. אתה יכול להתחיל עם איזה קוד שנראה כך:

function ShippingForm({ country }) {
  const [cities, setCities] = useState(null);
  // This Effect fetches cities for a country
  useEffect(() => {
    let ignore = false;
    fetch(`/api/cities?country=${country}`)
      .then(response => response.json())
      .then(json => {
        if (!ignore) {
          setCities(json);
        }
      });
    return () => {
      ignore = true;
    };
  }, [country]);

  const [city, setCity] = useState(null);
  const [areas, setAreas] = useState(null);
  // This Effect fetches areas for the selected city
  useEffect(() => {
    if (city) {
      let ignore = false;
      fetch(`/api/areas?city=${city}`)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setAreas(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [city]);

  // ...

למרות שהקוד הזה חוזר על עצמו, נכון לשמור על אפקטים אלה נפרדים זה מזה. הם מסנכרנים שני דברים שונים, אז לא כדאי למזג אותם לאפקט אחד. במקום זאת, אתה יכול לפשט את הרכיב ShippingForm למעלה על ידי חילוץ ההיגיון המשותף בין ה-useData שלך:

function useData(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (url) {
      let ignore = false;
      fetch(url)
        .then(response => response.json())
        .then(json => {
          if (!ignore) {
            setData(json);
          }
        });
      return () => {
        ignore = true;
      };
    }
  }, [url]);
  return data;
}

עכשיו אתה יכול להחליף את שני הפקטים ברכיבי ShippingForm בקריאות ל-useData:

function ShippingForm({ country }) {
  const cities = useData(`/api/cities?country=${country}`);
  const [city, setCity] = useState(null);
  const areas = useData(city ? `/api/areas?city=${city}` : null);
  // ...

חילוץ Hook מותאם אישית מבצע את זרימת למפורשת. אתה מזין את ה’כתובת’ פנימה ואתה מוציא את ה’נתונים’. על ידי “הסתרת” האפקט שלך בתוך useData, אתה גם מונע ממישהו שעובד על רכיב ShippingForm להוסיף לו תלות מיותרות. עם הזמן, רוב האפקטים של האפליקציה שלך יהיו ב-Hooks מותאמים אישית.

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // 🔴 Avoid: using custom "lifecycle" Hooks
  useMount(() => {
    const connection = createConnection({ roomId, serverUrl });
    connection.connect();

    post('/analytics/event', { eventName: 'visit_chat' });
  });
  // ...
}

// 🔴 Avoid: creating custom "lifecycle" Hooks
function useMount(fn) {
  useEffect(() => {
    fn();
  }, []); // 🔴 React Hook useEffect has a missing dependency: 'fn'
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Good: two raw Effects separated by purpose

  useEffect(() => {
    const connection = createConnection({ serverUrl, roomId });
    connection.connect();
    return () => connection.disconnect();
  }, [serverUrl, roomId]);

  useEffect(() => {
    post('/analytics/event', { eventName: 'visit_chat', roomId });
  }, [roomId]);

  // ...
}

function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');

  // ✅ Great: custom Hooks named after their purpose
  useChatRoom({ serverUrl, roomId });
  useImpressionLog('visit_chat', { roomId });
  // ...
}

ווים מותאמים אישיים עוזרים לך לעבור לדפוסים טובים יותר

אפקטים הם “פתח מילוט”: אתה משתמש בהם כאשר אתה צריך “לצאת החוצה React” וכאשר אין פתרון מובנה טוב יותר עבור שימוש במקרה שלך. עם הזמן, המטרה של צוות React היא לצמצם את מספר האפקטים באפליקציה שלך למינימום על ידי מתן פתרונות ספציפיים יותר לבעיות מדוייקות יותר. עטיפה של האפקטים שלך ב-Hooks מותאמים אישית מקלה על שדרוג הקוד שלך כאשר הפתרונות האלה יהיו זמינים.

נחזור לדוגמא הזו:

בדוגמה שלמעלה, useOnlineStatus מיושם עם זוג של useState ו-useEffect. עם זאת, זה לא הפתרון הטוב ביותר האפשרי. יש מספר מקרי קצה שהיא לא לוקחת בחשבון. לדוגמה, הוא מניח שכאשר הרכיב נטען, isOnline כבר נכון, אבל זה עשוי להיות שגוי אם הרשת כבר יצאה לstate לא מקוון. אתה יכול להשתמש בממשק ה-API של הדפדפן navigator.onLine כדי לבדוק זאת, אך יישום בו אוטומטי לא יעבוד בשרת ליצירת ה-HTML הראשוני. בקיצור, ניתן לשפר את הקוד הזה.

למרבה המזל, React 18 כולל API ייעודי בשם useSyncExternalStore מטפל בכל הבעיות הללו עבורך. הנה איך ה-‘useOnlineStatus’ שלך נכתב מחדש כדי לנצל את ה-API החדש הזה:

שימו לב כיצד לא היית צריך לשנות אף אחד מהרכיבים כדי לבצע את ההגירה הזו:

function StatusBar() {
  const isOnline = useOnlineStatus();
  // ...
}

function SaveButton() {
  const isOnline = useOnlineStatus();
  // ...
}

זו סיבה נוספת לכך שעטיפה של בHooks מותאמים באופן אישי היא אפקטית בשעה מועילה:

1. אתה הופך את זרימת הנתונים אל האפקטים שלך וממנו בצורה מאוד מפורשת.
2. אתה נותן לרכיבים שלך להתמקד בכוונה ולא ביישום המדויק של האפקטים שלך.
3. כאשר React מוסיף תכונות חדשות, אתה יכול להוציא את האפקטים האלה מבלי לשנות אף אחד מהרכיבים שלך.

בדומה למערכת עיצוב,K יעזור לך להתחיל לחלץ ניבים נפוצים מכניסי האפליקציה שלך לתוך Hooks מותאמים אישית.

import { use } from 'react'; // Not available yet!

function ShippingForm({ country }) {
  const cities = use(fetch(`/api/cities?country=${country}`));
  const [city, setCity] = useState(null);
  const areas = city ? use(fetch(`/api/areas?city=${city}`)) : null;
  // ...

יש יותר מדרך אחת לעשות את זה

נניח שאתה ליישם אנימציה דהייה מאפס באמצעות דפדפן requestAnimationFrame API. אתה יכול להתחיל עם אפקט שמגדיר לולאת אנימציה. על כל פריים של האנימציה, אתה יכול לשנות את התנאים של צומת ה-DOM שאתה [מחזיק ב-ref-dom] ל-1 הקוד שלך עשוי להתחיל כך:

כדי להפוך את הרכיב לקריאה יותר, תוכל להחלץ את ההיגיון לתוך Hook מותאם אישית של ‘useFadeIn’:

אתה יכול לשמור את הקוד ‘useFadeIn’ כפי שהוא, אבל אתה יכול גם לשחזר אותו יותר. לדוגמה, אתה יכול לחלץ את ההיגיון להגדרת לולאת האנימציה מתוך useFadeIn ל-useAnimationLoop Hook מותאם אישית:

עם זאת, לא חייב לעשות זאת. כמו בפונקציות רגילות, בסוף אתה מחליט היכן לשרת את הגבולות בין חלקים שונים של הקוד שלך. אתה יכול גם לנקוט בגישה שונה מאוד. במקום לשמור על ההיגיון באפקט, אתה יכול להעביר את רוב ההיגיון החיוני בתוך JavaScript מחלקה:

אפקטים מאפשרים לך לחבר את React למערכות חיצוניות. ככל שנדרש יותר תיאום בין אפקטים (לדוגמה, לשרשרת אנימציות מרובות), יותר הגיוני לחלץ את ההיגיון הזה מתוך אפקטים וHooks לגמרי כמו בארגז החול שלמעלה. לאחר מכן, הקוד שחילצת גורם ל”מערכת החיצונית”. זה יכול לפרסם הודעות למערכת שהעברת מחוץ ל-React.

הדוגמאות לעיל מניחות שהלוגיקת ה-Fade-in צריכה להיות כתובה ב-JavaScript. עם זאת, אני מציית הדה-אין הספציפית הזו פשוטה יותר והרבה יותר יעילה ליישום עם CSS אנימציה:

לפעמים אתה אפילו לא צריך Hook!