Сначала ознакомьтесь с моим введением в React hooks, если вы новичок в них.
Один из реактивных крючков, который я иногда использую, – это использовать памятку .
import React, { useMemo } from 'react'Этот крючок используется для создания запоминаемого значения.
Этот крючок очень похож на обратный вызов пользователя , разница в том, что использовать обратный вызов возвращает запоминаемый обратный вызов и использовать памятку возвращает запоминаемое значение, результат этого вызова функции. Вариант использования тоже другой. использовать обратный вызов используется для обратных вызовов, передаваемых дочерним компонентам.
Иногда вам приходится вычислять значение либо с помощью сложных вычислений, либо обращаясь к базе данных для выполнения дорогостоящего запроса, либо к сети.
Используя этот хук, эта операция выполняется только один раз, затем значение будет сохранено в записанном значении, и в следующий раз, когда вы захотите сослаться на него, вы получите его намного быстрее.
Вот как это использовать:
const memoizedValue = useMemo(() => expensiveOperation())
Убедитесь, что вы добавили этот пустой массив в качестве второго параметра в используйте Memo() , иначе запоминание вообще не произойдет.
Если вам нужно передать аргументы, вам также необходимо передать их в массиве:
const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2])
Если один из параметров изменится при попытке доступа к значению, значение, конечно, будет рассчитано без запоминания.
Оригинал: “https://flaviocopes.com/react-hook-usememo/”