startTransition

startTransition(scope)

• Reference
  • startTransition(scope)
• שימוש
  • סימון עדכון state כ-transition לא חוסם

Reference

startTransition(scope)

הפונקציה startTransition מאפשרת לסמן עדכון state כ-transition.

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

ראו דוגמאות נוספות בהמשך.

Parameters

• scope: פונקציה שמעדכנת state על ידי קריאה לפונקציית set אחת או יותר.set functions. React קוראת ל-scope מיד ללא ארגומנטים, ומסמנת כל עדכון state שמתוזמן באופן סינכרוני במהלך הקריאה ל-scope כ-transition. העדכונים יהיו לא-חוסמים ו-לא יציגו מחווני טעינה לא רצויים.

Returns

startTransition לא מחזירה דבר.

Caveats

• startTransition לא מספקת דרך לעקוב אם transition ממתין. כדי להציג אינדיקציית pending בזמן שה-transition מתבצע, צריך להשתמש ב-useTransition.

• אפשר לעטוף עדכון בתוך transition רק אם יש לכם גישה לפונקציית ה-set של אותו state. אם רוצים להתחיל transition בתגובה ל-prop או לערך שמוחזר מ-custom Hook, נסו להשתמש ב-useDeferredValue.

• הפונקציה שמעבירים ל-startTransition חייבת להיות סינכרונית. React מבצעת אותה מיד ומסמנת כ-transition את כל עדכוני ה-state שמתרחשים בזמן הביצוע. אם תנסו לבצע עדכוני state נוספים מאוחר יותר (למשל ב-timeout), הם לא יסומנו כ-transition.

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

• אי אפשר להשתמש בעדכוני transition כדי לשלוט בשדות קלט טקסט.

• אם יש כמה transitions בו-זמנית, React כרגע מאגדת אותם יחד. זו מגבלה שככל הנראה תוסר בגרסה עתידית.

שימוש

סימון עדכון state כ-transition לא חוסם

אפשר לסמן עדכון state כ-transition על ידי עטיפה שלו בקריאה ל-startTransition:

import { startTransition } from 'react';

function TabContainer() {
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }
  // ...
}

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

עם transition, ה-UI נשאר תגובתי גם בזמן רינדור מחדש. למשל, אם משתמש לוחץ על טאב ואז משנה את דעתו ולוחץ על טאב אחר, הוא יכול לעשות זאת בלי להמתין שהרינדור מחדש הראשון יסתיים.