ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Оптимизация производительности React - memo, useMemo, useCallback
год назад·6 мин. на чтение
Мемоизация — довольно продвинутая концепция в React, и в 95% случаев в ней нет необходимости. Процесс согласования React (reconciliation, алгоритм React, который определяет, следует ли обновлять компоненты) и виртуальный DOM (то, как React сообщает DOM об обновлении) в большинстве случаев настолько быстры, что невооруженным глазом вы не заметите никакого прироста производительности от использования этих улучшений производительности. Многие React разработчики будут ждать, пока производительность станет заметной проблемой, чтобы приступить к оптимизации.
Является ли ожидание снижения производительности хорошим способом оптимизации компонентов? Мы проектируем наши дороги и автомагистрали так, чтобы они «просто работали», не принимая во внимание транспортный поток? Конечно, нет! Вместо того, чтобы ждать, пока производительность станет проблемой, чтобы начать использовать или изучать методы оптимизации, начните использовать их при написании своих компонентов.
По умолчанию всякий раз, когда
Теперь всякий раз, когда значение
При сравнении пропсов, чтобы определить, должен ли компонент обновляться,
Каждый раз, когда этот компонент перерисовывается, массив будет создаваться заново. Несмотря на то, что
Теперь
Массив в конце
Как и в примере с
Теперь этот компонент будет пересоздавать
Что оно делает:
Обертывает функциональный компонент, перерисовывая компонент только тогда, когда проп или состояние «поверхностно» изменились.
Когда его использовать:
Что оно делает:
Запоминает значение, которое будет пересчитываться только при изменении одной из его зависимостей.
Когда его использовать:
Что оно делает:
Запоминает функцию, которая будет пересчитываться только при изменении одной из ее зависимостей.
Когда его использовать:
memo
Из трех методов мемоизации,memo
, возможно, является самым трудным для осмысления и понимания и, возможно, самым важным. Проще говоря, memo
по умолчанию предотвратит повторный рендеринг компонента. Он будет перерисовывать компонент только в том случае, если внутреннее состояние или проп изменяются. Сравнение происходит поверхностно. Рассмотрим такой пример.
import React, { useState } from 'react'; const Text = ({ text }) => { return <p >{text}</p> }; const ParentComponent = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); return ( <> <input onChange={(e) => setFirstName(e.target.value)} /> <input onChange={(e) => setLastName(e.target.value)} /> <Text text='Your name is:' /> <Text text={firstName} /> <Text text={lastName} /> </> ); };
ParentComponent
обновляется, он перерисовывает все 3 текстовых компонента. Подумайте, сколько символов пользователь может ввести в каждый из этих инпутов. Каждый раз, когда значение меняется, Text
каждый раз перерисовывается. Хотя это простой пример, легко увидеть, как это может стать более серьезной проблемой производительности, учитывая более крупные компоненты, которые отображают множество дочерних компонентов. Давайте посмотрим, как мы можем использовать memo
для оптимизации этого компонента и предотвращения повторного рендеринга всего по умолчанию.
import React, { useState, memo } from 'react'; // Компонент обернут в memo const Text = memo(({ text }) => { return <p >{text}</p> }); const ParentComponent = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); return ( <> <input onChange={(e) => setFirstName(e.target.value)} /> <input onChange={(e) => setLastName(e.target.value)} /> <Text text='Your name is:' /> <Text text={firstName} /> <Text text={lastName} /> </> ); };
firstName
или lastName
изменяет значение, он будет обновлять только соответствующий Text
, связанный с ним. Оборачивание Text
в memo
говорит Text
ререндериться только тогда, когда один из его пропсов изменяется.
Если мы будем менять input
, связанный с firstName
, обновится только второй Text
(<Text text={firstName} />
). Решая, обновлять или нет, Text
сравнивает текущее значение пропса text
с новым значением, и если они совпадут, компонент не обновится. Первый и третий Text
увидят, что их пропсы не поменяли своих значений, и решат, что рендериться не надо.
memo
поверхностно сравнивает пропсы. Это достигается за счет перебора ключей сравниваемых объектов и возврата значения true
, когда значения ключа в каждом объекте не строго равны.
Это определение может сбивать с толку, поэтому можно думать о нем с точки зрения равенства JS. Можно представить поверхностное сравнение, как строгое сравнении JS (===
) для каждого prevProp
и каждого newProp
. Если все возвращают true
, повторный рендеринг не запускается, если все возвращают false
, то рендеринг запускается. Т.е. значения типов boolean
, string
, number
, undefined
, null
будут приводить к ререндеру при изменении их значения. Значения типов array
, object
, function
будут вызывать повторную визуализацию КАЖДЫЙ раз, потому что их равенство объектов всегда будет возвращать false
. Потому что они сравниваются по ссылке.
В этот момент вам может быть интересно, как можно мемоизировать компонент с пропсами в виде массива, объекта или функции. Рассмотрим useMemo
и useCallback
.
useMemo
useMemo
может помочь вам оптимизировать функциональные компоненты, не пересчитывая значение переменной при каждом рендеринге. Он принимает список зависимостей в качестве аргумента, и когда он изменяется, он пересчитывает значение. Рассмотрим такой компонент:
// Пример без использования useMemo import React from "react"; const ComponentThatRendersOften = ({ prop1, prop2 }) => { const array = [prop1]; return ( <MemoizedComponent prop={array} /> ); };
MemoizedComponent
запоминается, он все равно будет перерисовываться каждый раз, когда рендерится ComponentThatRendersOften
. Переменная массива будет воссоздаваться при каждом рендеринге, и, поскольку поверхностное сравнение пропсов определяет повторный рендеринг, он будет каждый раз перерисовываться. Однако мы хотим перерисовывать только при изменении prop1
(массив зависит только от prop1
). Давайте посмотрим, как мы можем использовать useMemo
для пересчета значения только при изменении пропса prop1
.
// Пример с useMemo import React, { useMemo } from "react"; const ComponentThatRendersOften = ({ prop1, prop2 }) => { const array = useMemo(() => { return ([prop1]); }, [prop1]); return ( <MemoizedComponent prop={array} /> ); };
array
будет пересчитываться только при изменении prop1
. Если бы только prop2
обновлял и вызывал повторный рендеринг, array
использовал бы свое последнее вычисленное значение, а не пересчитывался заново. Он будет пересчитан только при изменении prop1
.
useMemo
имеет 2 аргумента:
- функция обратного вызова, которая возвращает запомненное значение.
- массив зависимостей, которые сообщают
useMemo
, когда он должен возвращать новое значение.
useMemo
, [prop1]
— это то, как мы сообщаем ему, чтобы он перезапускал вычисления только при изменении prop1
. Если бы мы хотели запустить его при изменении prop2
, это выглядело бы как [prop1, prop2]
. Если бы мы хотели, чтобы он вычислялся только при начальном монтировании, это выглядело бы как []
.
useMemo
может предложить значительное повышение производительности для функциональных компонентов, которые имеют сложные вычисления значений и часто перерисовываются.
useCallback
useCallback
концептуально схож с useMemo
. Единственное отличие состоит в том, что вместо того, чтобы запоминать значение, useCallback
запоминает функцию. Рассмотрим пример.
import React, { useState } from 'react'; const ComponentThatRendersOften = ({ cb1, cb2 }) => { const [state, setState] = useState(...); const func = () => { setState(...); cb1(); }; return ( <MemoizedComponent onClick={func} /> ); };
useMemo
, каждый раз, когда этот компонент выполняет повторный рендеринг, он будет воссоздавать функцию. Несмотря на то, что MemoizedComponent
запоминается, он все равно будет перерисовываться каждый раз, когда ComponentThatRendersOften
рендерится, потому что func
пересоздаются. Мы могли бы переместить эту функцию за пределы области действия компонента, чтобы не перерисовывать его каждый раз, но тогда мы будем передавать пропсы, локальные переменные и установщики состояния. Это было бы невероятно раздражающим при большом количестве переменных, и это ухудшает читабельность. Давайте мемоизируем эту функцию с помощью useCallback
, чтобы воссоздавать эту функцию только при изменении пропса cb1
.
import React, { useState, useCallback } from 'react'; const ComponentThatRendersOften = ({ cb1, cb2 }) => { const [state, setState] = useState(...); const func = useCallback(() => { setState(...); cb1(); }, [cb1, setState]); return ( <MemoizedComponent onClick={func} /> ); };
func
только при изменении cb1
.
useCallback
имеет 2 аргумента:
- функция обратного вызова, которая запоминается и возвращается
- массив зависимостей, которые сообщают
useCallback
, когда следует воссоздать функцию.
useMemo
, массив в конце useCallback
- [cb1])
- это то, как мы сообщаем ему воссоздавать функцию только тогда, когда cb1
меняет значение. Если бы мы хотели запустить его, когда cb2
и state
также изменились, это выглядело бы как [cb1, cb2, state]
. Если бы мы хотели, чтобы он вычислялся только при начальном монтировании, это выглядело бы как []
.
Когда и что использовать
Самая сложная часть мемоизации — это знать, следует ли ее использовать и когда. Вот краткий список, который поможет решить, является ли мемоизация хорошим решением. Если отмечено большинство или все пункты «когда использовать» и не отмечен ни один пунктов «когда не использовать», вы можете и должны его использовать.memo
Что оно делает:
Обертывает функциональный компонент, перерисовывая компонент только тогда, когда проп или состояние «поверхностно» изменились.
Когда его использовать:
- Вы хотите перерендерить компонент только в том случае, если проп изменился (он все равно будет перерисовываться при обновлении внутреннего состояния).
- Компонент среднего или большого размера или находится выше в дереве React.
- Компонент часто перерисовывается с заметно низкой производительностью.
- Компонент функциональный (не классовый).
- Чтобы обернуть классовый компоненты (для классовых компонентов используется
PureComponent
). - Компонент небольшой или находится ниже в React дереве.
- Компонент не имеет заметно низкой производительности.
useMemo
Что оно делает:
Запоминает значение, которое будет пересчитываться только при изменении одной из его зависимостей.
Когда его использовать:
- Вы передаете переменную в мемоизированный компонент, при этом тип переменной не относится к типу
boolean
,string
,number
,undefined
,null
. Чаще всего оборачивает массивы и объекты. - Только внутри функциональных компонентов
- Вы передаете переменную в мемоизированный компонент, который возвращает
true
со строгим равенством JS (===
). - В классовых компонентах.
useCallback
Что оно делает:
Запоминает функцию, которая будет пересчитываться только при изменении одной из ее зависимостей.
Когда его использовать:
- Вы передаете локально объявленную функцию в мемоизированный компонент или другой массив мемоизированных зависимостей.
- Компонент - функциональный
- У вас есть функция, которая не передается в мемоизированный компонент.
- Вы можете легко переместить свою функцию за пределы компонента (очень простые аргументы функции).
Итоги
Использование этих трех методов мемоизации не только поможет вам создавать более быстрые и оптимизированные React приложения, но и поднимет ваши навыки работы с React на новый уровень. Поиск возможностей для оптимизации — это то, что отличает Senor React разработчиков от Middle или Junior.Что за хук useId в React?
год назад·1 мин. на чтение
useId - хук, который появился в React 18. Он помогает при работе с уникальными идентификаторами в компонентах.
Как работает хук useId
?
Основным вариантом использования useId
является создание уникальных идентификаторов для использования в элементах HTML. Лучшим примером этого может быть создание идентификатора для input и label, которые указывают на тот же идентификатор. Например, если у вас есть компонент EmailForm
, вы можете написать его так.
function EmailForm() { return ( <> <label htmlFor="email">Email</label> <input id="email" type="email" /> </> ) }
email
. Это, очевидно, плохо, поскольку каждый идентификатор на странице должен быть уникальным, и, кроме того, ваши label при нажатии теперь будут фокусироваться на первом инпуте с email
на странице, а не на инпуте электронной почты, связанном с этим label. Чтобы исправить это, мы можем использовать useId
.
Хукfunction EmailForm() { const id = useId() return ( <> <label htmlFor={id}>Email</label> <input id={id} type="email" /> </> ) }
useId
— это простой хук, который не принимает входных данных и возвращает уникальный идентификатор. Этот идентификатор уникален для каждого отдельного компонента, что означает, что мы можем отображать эту форму на нашей странице столько раз, сколько захотим, не беспокоясь о повторяющихся идентификаторах.
Идентификаторы, сгенерированные useId
, будут выглядеть примерно так: :r1:
, :r2:
и т.д.
Получение элементов с querySelector
Одна вещь, которую следует отметить в отношении хука useId
, заключается в том, что идентификаторы, созданные им, являются недопустимыми селекторами для использования с методом querySelector
. Это сделано намеренно, поскольку React не хочет, чтобы вы выбирали элементы по их идентификатору, используя что-то вроде querySelector
. Вместо этого вы должны использовать для этого хук useRef
. Если вы не знакомы с хуком useRef
, вам следует ознакомиться с руководством по хуку useRef
.
Использование нескольких идентификаторов в одном компоненте
Одна важная вещь, которую следует отметить в отношении этого хука, заключается в том, что вы должны использовать его только один раз для каждого компонента. Это поможет с производительностью и по-прежнему даст вам преимущества, которые вы хотите получить от хука.Как вы можете видеть в приведенном выше примере, мы использовалиfunction LogInForm() { const id = useId() return ( <> <div> <label htmlFor={`${id}-email`}>Email</label> <input id={`${id}-email`} type="email" /> </div> <div> <label htmlFor={`${id}-password`}>Password</label> <input id={`${id}-password`} type="password" /> </div> </> ) }
useId
один раз в компоненте и просто добавили уникальный идентификатор в конец идентификатора, сгенерированного useId
. Это по-прежнему дает нам уникальные идентификаторы для всех элементов на нашей странице, но избавляет нас от накладных расходов на производительность, связанных с многократным вызовом этого хука в компоненте с несколькими идентификаторами.
Рендеринг на стороне сервера
Еще одна важная причина использовать этот хук — помочь с рендерингом на стороне сервера. Если вы используете что-то вродеMath.random()
или другой генератор случайных чисел для генерации идентификаторов, вы столкнетесь с проблемой, когда ваши идентификаторы для одного и того же компонента на сервере отличаются от идентификаторов для этих компонентов на клиенте. Это становится особенно проблематичным, когда в вашем приложении есть сочетание клиентского и серверного отображаемого кода, поскольку теперь вы больше не можете доверять идентификаторам, сгенерированным вашим кодом.
Хук useId
исправляет все это, поскольку сгенерированные им идентификаторы не являются случайными. Это означает, что идентификатор будет совпадать между сервером и клиентом, и независимо от того, какое сочетание клиент-серверный код у вас есть, вы можете быть уверены, что ваши идентификаторы верны. Это самая большая причина для использования этого хука, поскольку он значительно упрощает работу с серверным кодом.
Итоги
Легко упустить из виду хукuseId
в React 18 из-за всех других удивительных функций/хуков, выпущенных вместе с ним, но этот маленький хук невероятно полезен.