startTransition

startTransition(scope)

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

הפניה

startTransition(scope)

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

import { startTransition } from 'react';

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

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

עוד דוגמאות נוספות.

פרמטרים

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

מחזירה

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

אזהרות

• startTransition לא מספקת דרך לעקוב אם מעבר ממתין. צריך להשתמש ב-useTransition.

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

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

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

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

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

שימוש

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

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

import { startTransition } from 'react';

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

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

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

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