Введение в React useCallBack()

При создании веб-сайта с использованием React важно учитывать, насколько быстро он загружается и как быстро пользователи могут взаимодействовать с ним. Один из способов ускорить работу веб-сайта React — предотвратить выполнение ненужной работы, например повторного рендеринга частей страницы, которые не изменились.

ФункцияuseCallback() в React помогает нам достичь этого, запоминая определяемые нами функции и воссоздавая их только при необходимости.Это может сделать веб-сайт более быстрым и отзывчивым для пользователей. Согласно опросу Stack Overflow , проведенному в том же году, React — самая популярная библиотека JavaScript для внешнего интерфейса , предполагающая, что useCallback(), вероятно, широко используется в отрасли.

В этой статье мы объясним , что такое useCallBack() в React и как использовать его в нашем коде React для повышения производительности.

Что такое useCallBack в React?

useCallback() — это функция-ловушка, предоставляемая React, которая используется для запоминания функции. Другими словами, это помогает оптимизировать производительность компонента, избегая нежелательного повторного рендеринга.

В React, когда состояние компонента или свойство изменяется, компонент перерисовывается, чтобы отразить обновленные значения. Этот процесс требует значительных вычислительных ресурсов и может снизить производительность приложения при неправильном обращении. Вот где пригодится useCallback().

С помощью useCallback() пользователи могут запоминать функцию, то есть она переопределяется только при изменении ее зависимостей. Это предотвращает ненужный повторный рендеринг компонентов, тем самым оптимизируя производительность приложения.

Вот пример —

const memoizedCallback = useCallback(

() => {

сделать что-то (а, б);

},

[а, б],

);

Хотя начать работу с React с помощью учебных пособий — отличный способ, динамичный курс для начала разработки может значительно помочь вам обновить свои навыки. Ознакомьтесь с программой Executive Post Graduate Program в области разработки программного обеспечения — курс «Специализация в разработке полного стека» от upGrad до кикстарта!

Преимущества использования useCallBack()

Вот некоторые преимущества использования React useCallBack():

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

Посетитекурсы по разработке программного обеспечения upGrad , чтобы повысить свою квалификацию.

Синтаксис и параметры useCallBack()

const memoizedCallback = useCallback(

() => {

сделай что-нибудь();

},

[зависимость1, зависимость2]

);

В примере хук useCallback() запоминает функцию doSomething(), что означает кэширование ранее созданной версии. Кэшированная функция будет использоваться только при последующих рендерах, если не изменится значениеdependency1 или dependency2.

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

Разница между useMemo() и useCallBack()

useCallback и useMemo — это хуки React, которые могут повысить производительность приложения React за счет запоминания значений. Оба хука принимают функцию в качестве аргумента и возвращают запомненную версию этой функции.

Вот разница между ними:

Сценарии использования useCallBack()

Вот сценарии, в которых можно использовать useCallBack():

Оптимизация дочерних компонентов

useCallback React оптимизирует дочерние компоненты, которые полагаются на равенство ссылок, чтобы избежать ненужных рендеров, особенно при передаче обратных вызовов этим дочерним компонентам.

Предотвращение ненужных рендеров

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

Используйте свой шанс подробно разобраться в функции useCallBack() с помощью курса Full Stack Software Development Bootcamp от upGrad.

Изучите наши популярные курсы по программной инженерии

Примеры использованияCallBack()

Вот несколько примеров того, как реализовать хук useCallBack().

useCallBack Пример 1

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

импортировать React, {useCallback} из 'реагировать';

функция Родительский Компонент () {

const handleButtonClick = useCallback(() => {

console.log('Кнопка нажата');

}, []);

возвращаться (

<ChildComponent onClick={handleButtonClick} />

);

}

функция дочернего компонента ({ onClick }) {

возвращаться (

<button onClick={onClick}>Нажмите на меня</button>

);

}

useCallBack Пример 2

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

импортировать React, {useState, useCallback} из 'реагировать';

функция Родительский Компонент () {

const [данные, setData] = useState([]);

const processData = useCallback(() => {

const processingData = «Обработанные данные»;

вернуть обработанные данные;

}, [данные]);

возвращаться (

<ChildComponent processData={processData} />

);

}

функция ChildComponent({processData}) {

константный результат = processData();

возвращаться (

<div>{результат}</div>

);

}

Оптимизация производительности React с использованием useCallBack()

Хук useCallback — это мощный инструмент в React, который позволяет вам запоминать функцию, гарантируя, что она будет переделана только тогда, когда изменится одна из ее зависимостей. Это особенно полезно для часто вызываемых функций, требующих высокой производительности. Посмотрите пример ниже, чтобы увидеть, как его можно использовать:

импортировать {useState, useEffect} из «реагировать»;

приложение функции () {

const [слово, setWord] = useState («Боб»);

const say = () => console.log(`Ваше слово: ${word}`);

использоватьЭффект(() => {

сказать();

}, [сказать]);

return <div>Добро пожаловать!</div>;

}

Пример демонстрирует, что хук useEffect зависит от функции say, что означает, что он должен срабатывать только при изменении функции. Тем не менее, из-за проверки ссылочного равенства React, функция say всегда будет оцениваться как истинная, даже в случае отсутствия фактических изменений, что приводит к ненужным рендерингам.

Обратный вызов useEffect будет использоваться при каждом рендере, что не подходит для производительности. Один из способов решить эту проблему — переместить функцию в блок useEffect, но это не идеальное решение, поскольку вы не сможете использовать функцию в любом другом месте. Посмотрите на этот пример ниже —

импортировать React, {useState, useEffect} из 'реагировать';

приложение функции () {

const [слово, setWord] = useState («Боб»);

const say = () => console.log(`Ваше слово: ${word}`);

использоватьЭффект(() => {

сказать();

}, [сказать]);

return <div>Добро пожаловать!</div>;

}

Другое решение — реализовать хук useCallback , обернув функцию. Важно помнить, что для функции useCallback требуется массив зависимостей, как и для useEffect. Если функция принимает какие-либо переменные, пользователи могут передавать ее вместе с массивом; или оставить его пустым. Здесь, поскольку функция say использует переменную слова, мы включаем ее в массив.

импортировать {useState, useEffect, useCallback} из «реагировать»

приложение функции () {

const [слово, setWord] = useState («Боб»)

const say = useCallback(()=>console.log(`Ваше слово: ${word}`),[word])

использоватьЭффект(()=>{

сказать()

},[сказать])

вернуться <div>Добро пожаловать!</div>

}

Когда не использовать useCallBack()

Хотя useCallback() — полезный инструмент для оптимизации производительности в определенных сценариях, бывают случаи, когда он не нужен или даже вреден. Вот несколько примеров, когда не следует использовать useCallback():

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

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

Востребованные навыки разработки программного обеспечения

Заключение

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

upGrad предлагает программу магистра наук в области компьютерных наук , которая обеспечивает всестороннее образование в области компьютерных наук с упором на отраслевые навыки. Эта программа предназначена для любого новичка или более опытного человека, чтобы улучшить свои навыки разработки программного обеспечения. С этим курсом студенты будут более чем готовы повысить свою карьеру в реальном мире и стать экспертами в своих областях.