Вы, должно быть, слышали это очень часто, что мы должны запоминать функции обратного вызова с помощью useCallback (), чтобы предотвратить бесполезный повторный рендеринг компонентов.

Но что такое useCallback () 🤔 . Вы когда-нибудь задумывались об этом?

Позвольте мне помочь вам разобраться, что это такое и где его правильно использовать.

Давайте сначала разберемся с проверками равенства функций

Прежде чем увидеть, как мы его используем, давайте посмотрим, что он решает. Напишем простую функцию, которая возвращает функцию:

mul1 и mul2 - это функции, которые умножают два числа. Они были созданы функцией умножения .

Функции в JavaScript - это обычный объект. Функции mul1 и mul2 используют один и тот же код, но являются разными функциональными объектами. Сравнение их дает ложную оценку .

Так работают объекты JavaScript. Объект (включая объект функции) равен только самому себе.

Теперь цель useCallback ()

React.useCallback () в основном решает проверку равенства функций, которую мы видели выше. Различные функциональные объекты, использующие один и тот же код, часто создаются внутри компонентов React:

handleClick (встроенная функция) - это другой объект функции при каждом рендеринге CustomComponent .

И нет ничего плохого в том, чтобы функции объявлялись встроенными в компоненты React. Это не окажет вредного воздействия на производительность.

Но в некоторых случаях вам необходимо поддерживать один экземпляр функции между отрисовками:

1. Например, когда функция имеет какое-то внутреннее состояние, например, когда функция заблокирована / задушена.

2. Обернутый внутрь функциональный компонент React.memo()принимает свойство объекта функции.

Если дочерний компонент, принимающий обратный вызов, полагается на проверку ссылочного равенства (например, React.memo () или shouldComponentUpdate () ) для предотвращения ненужных повторных отрисовок при изменении его свойств, то важно, чтобы любые свойства обратного вызова не менялись между рендеры.

Поэтому в родительском компоненте мы можем обернуть опору обратного вызова в useCallback () и гарантировать, что он передает тот же объект функции в оптимизированный дочерний компонент.

3. Когда функциональный объект является зависимостью от других хуков, например useEffect(..., [callback])

В приведенном выше примере, если myFunction делает что-то, что вызывает перестройку MyComponent (например, если он делает что-то, что изменяет свойства или состояние), вы попадете в состояние бесконечного цикла.

Чтобы предотвратить это, мы оборачиваем функцию useCallback () вокруг функции и определяем ее зависимости, чтобы гарантировать, что функция будет повторно создана только в том случае, если ее зависимости изменились. Следовательно, функция больше не объявляется повторно в каждом цикле рендеринга.

Итак, приведенные выше варианты использования: когда полезен хук useCallback : при одинаковых значениях зависимостей хук возвращает один и тот же экземпляр функции между рендерингами и увеличивает производительность.

Надеюсь, это помогло вам понять, что такое useCallback ()! 😊

Спасибо, что прочитали эту статью. Если вам понравилось, нажмите кнопку 👏, чтобы помочь другим найти его.