useMemo

const cachedValue = useMemo(calculateValue, dependencies)

• הפניה
  • useMemo(calculateValue, dependencies)
• שימוש
  • דילוג על חישובים מחדש יקרים
  • דילוג על עיבוד מחדש של רכיבים
  • שינון תלות של Hook אחר
  • שינון פונקציה
• פתרון בעיות
  • החישוב שלי פועל פעמיים בכל עיבוד מחדש
  • הקריאה useMemo שלי אמורה להחזיר אובייקט, אבל מחזירה לא מוגדרת
  • בכל פעם שהרכיב שלי מעבד, החישוב ב-useMemo רץ מחדש
  • אני צריך להתקשר ל-useMemo עבור כל פריט רשימה בלולאה, אבל זה אסור

הפניה

useMemo(calculateValue, dependencies)

התקשר ל-useMemo ברמה העליונה של הרכיב שלך כדי לשמור חישוב במטמון בין עיבוד מחדש:

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

ראה דוגמאות נוספות למטה.

פרמטרים

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

• dependencies: רשימת כל הערכים התגובתיים שאליהם מתייחסים בתוך הקוד calculateValue. הערכים Reactive כוללים את props, state, ואת כל המשתנים והפונקציות המוצהרות ישירות בתוך גוף הרכיב שלך. אם ה-linter שלך הוא מוגדר עבור React, הוא יוודא שכל ערך תגובתי צוין כהלכה כתלות. רשימת התלות חייבת לכלול מספר קבוע של פריטים ולהיכתב בשורה כמו [dep1, dep2, dep3]. React ישווה כל תלות עם הערך הקודם שלה באמצעות ההשוואה Object.is.

מחזירה

בעיבוד הראשוני, useMemo מחזיר את התוצאה של קריאה ל-calculateValue ללא ארגומנטים.

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

אזהרות

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

שימוש

דילוג על חישובים מחדש יקרים

כדי לשמור חישוב במטמון בין עיבוד מחדש, עטוף אותו בקריאה useMemo ברמה העליונה של הרכיב שלך:

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

אתה צריך להעביר שני דברים ל-useMemo:

1. פונקציית חישוב שאינה לוקחת ארגומנטים, כמו () =>, ומחזירה את מה שרצית לחשב.
2. רשימת תלות הכוללת כל ערך בתוך הרכיב שלך שהוא used בחישוב שלך.

בעיבוד הראשוני, ערך שתקבל מ-useMemo יהיה התוצאה של קריאה לחישוב שלך.

בכל רינדור עוקב, React ישווה את התלות עם התלות שהעברת במהלך העיבוד האחרון. אם אף אחת מהתלות לא השתנתה (בהשוואה ל-Object.is), useMemo יחזיר את הערך שכבר חישבת בעבר. אחרת, React יפעיל מחדש את החישוב שלך ויחזיר את הערך החדש.

במילים אחרות, useMemo מאחסן תוצאת חישוב במטמון בין רינדור מחדש עד להשתנות התלות שלה.

בואו נעבור על דוגמה כדי לראות מתי זה מלא use.

כברירת מחדל, React יפעיל מחדש את כל הגוף של הרכיב שלך בכל פעם שהוא מעבד מחדש. לדוגמה, אם TodoList זה מעדכן את state שלו או מקבל props חדש מהאב שלו, הפונקציה filterTodos תפעיל מחדש:

function TodoList({ todos, tab, theme }) {
  const visibleTodos = filterTodos(todos, tab);
  // ...
}

בדרך כלל, זו לא בעיה כי use רוב החישובים מהירים מאוד. עם זאת, אם אתה מסנן או משנה מערך גדול, או עושה חישוב יקר, אולי תרצה לדלג על ביצוע זה שוב אם הנתונים לא השתנו. אם גם todos וגם tab זהים לאלו שהיו במהלך העיבוד האחרון, עטיפה של החישוב ב-useMemo כמו קודם מאפשרת לך מחדשuse visibleTodos שכבר חישבת בעבר.

סוג זה של שמירה במטמון נקרא memoization.

console.time('filter array');
const visibleTodos = filterTodos(todos, tab);
console.timeEnd('filter array');

console.time('filter array');
const visibleTodos = useMemo(() => {
  return filterTodos(todos, tab); // Skipped if todos and tab haven't changed
}, [todos, tab]);
console.timeEnd('filter array');

דילוג על עיבוד מחדש של רכיבים

במקרים מסוימים, useMemo יכול גם לעזור לך לייעל את הביצועים של עיבוד מחדש של רכיבי צאצא. כדי להמחיש זאת, נניח שרכיב TodoList זה מעביר את ה-visibleTodos כעזר לרכיב List הילד:

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    <div className={theme}>
      <List items={visibleTodos} />
    </div>
  );
}

שמת לב שהחלפת משענת theme מקפיאה את האפליקציה לרגע, אבל אם תסיר את <List /> מה-JSX שלך, זה מרגיש מהיר. זה אומר לך שכדאי לנסות לייעל את רכיב List.

כברירת מחדל, כאשר רכיב מעבד מחדש, React מעבד מחדש את כל הילדים שלו באופן רקורסיבי. זו הסיבה שכאשר TodoList מעבד מחדש עם theme שונה, הרכיב List גם מעבד מחדש. זה בסדר עבור רכיבים שאינם דורשים חישוב רב כדי לרנדר מחדש. אבל אם אימתת שעיבוד מחדש איטי, אתה יכול להגיד ל-List לדלג על רינדור מחדש כאשר ה-props שלו זהים לעיבוד האחרון על-ידי עטיפה ב-memo:

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

עם השינוי הזה, List ידלג על עיבוד מחדש אם כל ה-props שלו הם זהים לאלו בעיבוד האחרון. זה המקום שבו שמירה במטמון של החישוב הופכת חשובה! תאר לעצמך שחשבת visibleTodos ללא useMemo:

export default function TodoList({ todos, tab, theme }) {
  // Every time the theme changes, this will be a different array...
  const visibleTodos = filterTodos(todos, tab);
  return (
    <div className={theme}>
      {/* ... so List's props will never be the same, and it will re-render every time */}
      <List items={visibleTodos} />
    </div>
  );
}

בדוגמה שלמעלה, הפונקציה filterTodos תמיד יוצרת מערך שונה, בדומה לאופן שבו האובייקט {} מילולי תמיד יוצר אובייקט חדש. בדרך כלל, זו לא תהיה בעיה, אבל זה אומר שList props לעולם לא יהיה אותו הדבר, והאופטימיזציה של memo שלך לא תעבוד. זה המקום שבו useMemo שימושי:

export default function TodoList({ todos, tab, theme }) {
  // Tell React to cache your calculation between re-renders...
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab] // ...so as long as these dependencies don't change...
  );
  return (
    <div className={theme}>
      {/* ...List will receive the same props and can skip re-rendering */}
      <List items={visibleTodos} />
    </div>
  );
}

על ידי גלישת חישוב visibleTodos ב-useMemo, אתה מבטיח שיש לו את אותו ערך בין העיבודים החוזרים (עד שישתנו תלות). אינך חייב לעטוף חישוב ב-useMemo אלא אם כן אתה עושה זאת מסיבה מסוימת. בדוגמה זו, הסיבה היא שאתה מעביר אותו לרכיב עטוף ב-memo, וזה מאפשר לו לדלג על עיבוד מחדש. יש עוד כמה סיבות להוסיף את useMemo המתוארות בהמשך דף זה.

export default function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  const children = useMemo(() => <List items={visibleTodos} />, [visibleTodos]);
  return (
    <div className={theme}>
      {children}
    </div>
  );
}

שינון תלות של Hook אחר

נניח שיש לך חישוב שתלוי באובייקט שנוצר ישירות בגוף הרכיב:

function Dropdown({ allItems, text }) {
  const searchOptions = { matchMode: 'whole-word', text };

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // 🚩 Caution: Dependency on an object created in the component body
  // ...

Depending on an object like this defeats the point of memoization. When a component re-renders, all of the code directly inside the component body runs again. שורות הקוד שיוצרות את האובייקט searchOptions יפעלו גם בכל עיבוד מחדש. מכיוון שsearchOptions היא תלות של הקריאה useMemo שלך, והיא שונה בכל פעם, React יודע שהתלות שונה, ומחשב מחדש את searchItems בכל פעם.

כדי לתקן זאת, אתה יכול memo לשנות את האובייקט searchOptions עצמו לפני שתעביר אותו כתלות:

function Dropdown({ allItems, text }) {
  const searchOptions = useMemo(() => {
    return { matchMode: 'whole-word', text };
  }, [text]); // ✅ Only changes when text changes

  const visibleItems = useMemo(() => {
    return searchItems(allItems, searchOptions);
  }, [allItems, searchOptions]); // ✅ Only changes when allItems or searchOptions changes
  // ...

בדוגמה למעלה, אם ה-text לא השתנה, גם האובייקט searchOptions לא ישתנה. עם זאת, תיקון אפילו טוב יותר הוא להעביר את הצהרת האובייקט searchOptions בתוך של פונקציית החישוב useMemo:

function Dropdown({ allItems, text }) {
  const visibleItems = useMemo(() => {
    const searchOptions = { matchMode: 'whole-word', text };
    return searchItems(allItems, searchOptions);
  }, [allItems, text]); // ✅ Only changes when allItems or text changes
  // ...

כעת החישוב שלך תלוי ב-text באופן ישיר (שהוא מחרוזת ואינו יכול “בטעות” להיות שונה).

שינון פונקציה

נניח שהרכיב Form עטוף ב-memo. אתה רוצה להעביר אליו פונקציה בתור אבזר:

export default function ProductPage({ productId, referrer }) {
  function handleSubmit(orderDetails) {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }

  return <Form onSubmit={handleSubmit} />;
}

בדיוק כפי ש{} יוצר אובייקט אחר, הצהרות פונקציות כמו function() {} וביטויים כמו () => {} מייצרים פונקציה שונה בכל עיבוד מחדש. כשלעצמו, יצירת פונקציה חדשה אינה בעיה. זה לא משהו שצריך להימנע ממנו! עם זאת, אם הרכיב Form הוא memoized, יש להניח שברצונך לדלג על עיבוד מחדש כאשר לא השתנה props. אביזר שהוא תמיד שונה יביס את נקודת ה-memoization.

כדי memoלהפוך פונקציה עם useMemo, פונקציית החישוב שלך תצטרך להחזיר פונקציה אחרת:

export default function Page({ productId, referrer }) {
  const handleSubmit = useMemo(() => {
    return (orderDetails) => {
      post('/product/' + productId + '/buy', {
        referrer,
        orderDetails
      });
    };
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

זה נראה מגושם! פונקציות זיכרון נפוצות מספיק כדי ל-React יש Hook מובנה במיוחד בשביל זה. עטוף את הפונקציות שלך ב-useCallback במקום useMemo כדי למנוע צורך לכתוב פונקציה מקוננת נוספת:

export default function Page({ productId, referrer }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/' + productId + '/buy', {
      referrer,
      orderDetails
    });
  }, [productId, referrer]);

  return <Form onSubmit={handleSubmit} />;
}

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

פתרון בעיות

החישוב שלי פועל פעמיים בכל עיבוד מחדש

במצב קפדני, React יקרא לחלק מהפונקציות שלך פעמיים במקום פעם אחת:

function TodoList({ todos, tab }) {
  // This component function will run twice for every render.

  const visibleTodos = useMemo(() => {
    // This calculation will run twice if any of the dependencies change.
    return filterTodos(todos, tab);
  }, [todos, tab]);

  // ...

זה צפוי ולא אמור לשבור את הקוד שלך.

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

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

  const visibleTodos = useMemo(() => {
    // 🚩 Mistake: mutating a prop
    todos.push({ id: 'last', text: 'Go for a walk!' });
    const filtered = filterTodos(todos, tab);
    return filtered;
  }, [todos, tab]);

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

  const visibleTodos = useMemo(() => {
    const filtered = filterTodos(todos, tab);
    // ✅ Correct: mutating an object you created during the calculation
    filtered.push({ id: 'last', text: 'Go for a walk!' });
    return filtered;
  }, [todos, tab]);

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

כמו כן, עיין במדריכים בנושא עדכון אובייקטים ו-עדכון מערכים ללא מוטציה.

הקריאה useMemo שלי אמורה להחזיר אובייקט, אבל מחזירה לא מוגדרת

הקוד הזה לא עובד:

  // 🔴 You can't return an object from an arrow function with () => {
  const searchOptions = useMemo(() => {
    matchMode: 'whole-word',
    text: text
  }, [text]);

ב-JavaScript, () => { מתחיל את גוף פונקציית החץ, כך שהסוגר { אינו חלק מהאובייקט שלך. זו הסיבה שהוא לא מחזיר חפץ, ומוביל לטעויות. אתה יכול לתקן את זה על ידי הוספת סוגריים כמו ({ ו-}):

  // This works, but is easy for someone to break again
  const searchOptions = useMemo(() => ({
    matchMode: 'whole-word',
    text: text
  }), [text]);

עם זאת, זה עדיין מבלבל וקל מדי עבור מישהו לשבור על ידי הסרת הסוגריים.

כדי למנוע טעות זו, כתוב return statement במפורש:

  // ✅ This works and is explicit
  const searchOptions = useMemo(() => {
    return {
      matchMode: 'whole-word',
      text: text
    };
  }, [text]);

בכל פעם שהרכיב שלי מעבד, החישוב ב-useMemo רץ מחדש

ודא שציינת את מערך התלות כארגומנט שני!

אם תשכח את מערך התלות, useMemo יריץ מחדש את החישוב בכל פעם:

function TodoList({ todos, tab }) {
  // 🔴 Recalculates every time: no dependency array
  const visibleTodos = useMemo(() => filterTodos(todos, tab));
  // ...

זו הגרסה המתוקנת שמעבירה את מערך התלות כארגומנט שני:

function TodoList({ todos, tab }) {
  // ✅ Does not recalculate unnecessarily
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...

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

  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  console.log([todos, tab]);

לאחר מכן תוכל ללחוץ לחיצה ימנית על המערכים מעיבודים חוזרים שונים בקונסולה ולבחור “אחסן כמשתנה גלובלי” עבור שניהם. בהנחה שהראשון נשמר כ-temp1 והשני נשמר כ-temp2, לאחר מכן תוכל use למסוף הדפדפן כדי לבדוק אם כל תלות בשני המערכים זהה:

Object.is(temp1[0], temp2[0]); // Is the first dependency the same between the arrays?
Object.is(temp1[1], temp2[1]); // Is the second dependency the same between the arrays?
Object.is(temp1[2], temp2[2]); // ... and so on for every dependency ...

כאשר אתה מגלה איזו תלות שוברת את memoization, או מצא דרך להסיר אותה, או memoהגדל אותה גם כן.

אני צריך להתקשר ל-useMemo עבור כל פריט רשימה בלולאה, אבל זה אסור

נניח שהרכיב Chart עטוף ב-memo. אתה רוצה לדלג על רינדור מחדש של כל Chart ברשימה כאשר הרכיב ReportList מעבד מחדש. עם זאת, אינך יכול לקרוא ל-useMemo בלולאה:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item => {
        // 🔴 You can't call useMemo in a loop like this:
        const data = useMemo(() => calculateReport(item), [item]);
        return (
          <figure key={item.id}>
            <Chart data={data} />
          </figure>
        );
      })}
    </article>
  );
}

במקום זאת, חלץ רכיב עבור כל פריט ו-memoשנה נתונים עבור פריטים בודדים:

function ReportList({ items }) {
  return (
    <article>
      {items.map(item =>
        <Report key={item.id} item={item} />
      )}
    </article>
  );
}

function Report({ item }) {
  // ✅ Call useMemo at the top level:
  const data = useMemo(() => calculateReport(item), [item]);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
}

לחלופין, תוכל להסיר את useMemo ובמקום זאת לעטוף את Report עצמו ב-memo. אם הפרופס של item לא ישתנה, Report ידלג על עיבוד מחדש, אז Chart ידלג גם על עיבוד מחדש:

function ReportList({ items }) {
  // ...
}

const Report = memo(function Report({ item }) {
  const data = calculateReport(item);
  return (
    <figure>
      <Chart data={data} />
    </figure>
  );
});