<Profiler>

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

• הפניה
  • <Profiler>
  • onRender התקשרות חוזרת
• שימוש
  • מדידת ביצועי רינדור באופן פרוגרמטי
  • מדידת חלקים שונים באפליקציה

הפניה

<Profiler>

עטפו עץ קומפונטות ב-<Profiler> כדי למדוד את ביצועי הרינדור שלו.

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

אבזרים

• id: מחרוזת שמזהה את החלק ב-UI שאתם מודדים.
• onRender: onRender callback ש-React קוראת לו בכל פעם שקומפונטות בתוך העץ המנוטר מתעדכנות. הוא מקבל מידע על מה רונדר כמה זמן זה לקח.

אזהרות

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

onRender התקשרות חוזרת

React תקרא ל-onRender callback שלכם עם מידע על מה שרונדר.

function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime) {
  // Aggregate or log render timings...
}

פרמטרים

• id: מחרוזת ה-id prop של עץ ה-<Profiler> שבוצע לו commit now. זה יכול לזהות איזה חלק בעץ עבר להתחייב אם אתם משתמשים בכמה פרופילים.
• phase: אחד מהערכים "mount", "update" או "nested-update". כך אפשר לדעת האם העץ הורכב עכשיו לראשונה או רונדר מחדש בגלל שינוי ב-props, state או הוקס.
• actualDuration: מספר המילישניות שהושקעו ברינדור ה-<Profiler> וצאצאיו בעדכון הנוכחי. זה מצביע עד כמה תת-העץ משתמש היטב ב-memoization (לפני כן memo ו-useMemo). אידיאלית, הערך הזה אמור להיפגע אחרי ה-mount הראשוני כי רוב הצאצאים יצטרכו לרנדר מחדש אם ה-props הרלו שלהם משתנים.
• baseDuration: מספר המילישניות שמריך כמה זמן היה לוקח לרנדר מחדש את כל תת-העץ של <Profiler> בלי אופטימיזציות. הוא מחושב כשכר זמני הרינדור לאחר של כל קומפונטה בעץ. הערך הזה יותר את המחיר במקרה הגרוע של רינדור (מקל ראשוני או עץ בלי memoization). השוו אותו ל-actualDuration כדי לראות האם memoization עובדת.
• startTime: חותמת זמן מספרית לרגע שבו React התחילה לרנדר את העדכון הנוכחי.
• commitTime: חותמת זמן מספרית לרגע שבו React ביצעה commit לעדכון הנוכחי. הערך הזה שותף לכל הפרופילים באותו התחייבות, מה שמאפשר לקבץ אותם אני רוצה.

שימוש

מדידת ביצועי רינדור באופן פרוגרמטי

עטפו את קומפונטת <Profiler> סביב עץ React כדי למדוד את ביצועי הרינדור שלו.

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <PageContent />
</App>

דרושים שני props: id (מחרוזת) ו-onRender callback (פונקציה) ש-React קוראת לה בכל פעם שקומפוננתה בתוך העץ מבצעת עדכון עם “commit”.

מדידת חלקים שונים באפליקציה

אפשר להשתמש בכמה קומפונטות <Profiler> כדי למדוד חלקים שונים באפליקציה:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content />
  </Profiler>
</App>

אפשר גם לקנן קומפונטות <Profiler>:

<App>
  <Profiler id="Sidebar" onRender={onRender}>
    <Sidebar />
  </Profiler>
  <Profiler id="Content" onRender={onRender}>
    <Content>
      <Profiler id="Editor" onRender={onRender}>
        <Editor />
      </Profiler>
      <Preview />
    </Content>
  </Profiler>
</App>

למרות ש-<Profiler> היא קומפוננת קלת משקל, כדאי להשתמש בה רק כשצריך. כל שימוש מוסיף מעט עומס CPU וזיכרון לאפליקציה.