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.Какую структуру состояния React выбрать
8 месяцев назад·12 мин. на чтение
Компонент с хорошо структурированным состоянием приятно модифицировать и легко отлаживать. В этой статье вы найдете советы, которые следует учитывать при структурировании состояния в React компонентах.
Содержание туториала по React
Компонент с хорошо структурированным состоянием приятно модифицировать и легко отлаживать. В этой статье вы найдете советы, которые следует учитывать при структурировании состояния.
Другой случай, когда вы будете группировать данные в объект или массив, — это когда вы не знаете, сколько различных частей состояния вам понадобится. Например, когда у вас есть форма, в которой пользователь может добавлять настраиваемые поля.
Если ваша переменная состояния является объектом, помните, что вы не можете обновить в ней только одно поле без явного копирования других полей. Например, вы не можете использовать
Хотя этот код работает, в нем могут возникнуть «невозможные» состояний. Например, если вы забудете вызвать
Эта форма имеет три переменные состояния:
В настоящее время он сохраняет выбранный элемент как объект в переменной состояния
Обратите внимание, что если вы сначала нажмете «Выбрать» на элементе, а затем отредактируете его, ввод обновится, но метка внизу не отразит изменения. Это потому, что вы дублировали состояние и забыли обновить
В качестве альтернативы вы можете хранить выбранный индекс в состоянии.
Раньше состояние дублировалось так:
Теперь предположим, что вы хотите добавить кнопку для удаления места, которое вы уже посетили. Как бы вы это сделали? Обновление вложенного состояния включает в себя создание копий объектов от той части, которая была изменена. Удаление глубоко вложенного места потребует копирования всей его родительской цепочки мест. Такой код может быть очень многословным.
Если состояние слишком вложенное, чтобы его можно было легко обновить, подумайте о том, чтобы сделать его «плоским». Вот один из способов реструктуризации этих данных. Вместо древовидной структуры, в которой каждое место имеет массив своих дочерних мест, вы можете сделать так, чтобы каждое место содержало массив идентификаторов своих дочерних мест. Затем вы можете сохранить сопоставление каждого идентификатора места с соответствующим местом.
Эта реструктуризация данных может напомнить вам таблицу базы данных:
Теперь, когда состояние «плоское» (также известное как «нормализованное»), обновление вложенных элементов становится проще.
Чтобы удалить место сейчас, вам нужно всего лишь обновить два уровня состояния:
Иногда вы также можете уменьшить вложенность состояний, переместив часть вложенных состояний в дочерние компоненты. Это хорошо работает для временного состояния пользовательского интерфейса, которое не нужно сохранять, например, наведен ли элемент.
Принципы структурирования состояния
Когда вы пишете компонент, который содержит какое-то состояние, вам придется выбирать, сколько переменных состояния использовать и какой должна быть форма их данных. Хотя можно писать правильные программы даже с неоптимальной структурой состояний, есть несколько принципов, которые помогут вам сделать правильный выбор:- Состояние, связанное с группой. Если вы всегда одновременно обновляете две или более переменных состояния, рассмотрите возможность их объединения в одну переменную состояния.
- Избегайте противоречий в состоянии. Когда состояние структурировано таким образом, что несколько частей состояния могут противоречить и «не согласовываться» друг с другом, вы оставляете место для ошибок. Постарайтесь избежать этого.
- Избегайте избыточного состояния. Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента.
- Избегайте дублирования состояния. Когда одни и те же данные дублируются между несколькими переменными состояния или внутри вложенных объектов, их сложно синхронизировать. Уменьшайте дублирование, если возможно.
- Избегайте глубоко вложенных состояний. Глубоко иерархическое состояние не очень удобно обновлять. По возможности предпочтительнее структурировать состояние в плоском виде.
Состояние, связанное с группой
Иногда вы можете быть не уверены, использовать одну или несколько переменных состояния. Должны ли вы это сделать так?Или так?const [x, setX] = useState(0); const [y, setY] = useState(0);
Технически вы можете использовать любой из этих подходов. Но если какие-то две переменные состояния всегда изменяются вместе, было бы неплохо объединить их в одну переменную состояния. Тогда вы не забудете всегда синхронизировать их, как в этом примере, где перемещение курсора обновляет обе координаты красной точки:const [position, setPosition] = useState({ x: 0, y: 0 });
import { useState } from 'react'; export default function MovingDot() { const [position, setPosition] = useState({ x: 0, y: 0, }); return ( <div onPointerMove={(e) => { setPosition({ x: e.clientX, y: e.clientY, }); }} style={{ position: 'relative', width: '100vw', height: '100vh', }} > <div style={{ position: 'absolute', backgroundColor: 'red', borderRadius: '50%', transform: `translate(${position.x}px, ${position.y}px)`, left: -10, top: -10, width: 20, height: 20, }} /> </div> ); }
setPosition({ x: 100 })
в приведенном выше примере, потому что у него вообще не будет свойства y
. Вместо этого, если вы хотите установить только x
, вы должны либо выполнить setPosition({ ...position, x: 100})
, либо разделить их на две переменные состояния и выполнить setX(100)
.
Избегайте противоречий в состоянии
Вот форма обратной связи отеля с переменными состоянияisSending
и isSent
:
import { useState } from 'react'; export default function FeedbackForm() { const [text, setText] = useState(''); const [isSending, setIsSending] = useState(false); const [isSent, setIsSent] = useState(false); async function handleSubmit(e) { e.preventDefault(); setIsSending(true); await sendMessage(text); setIsSending(false); setIsSent(true); } if (isSent) { return <h1>Thanks for feedback!</h1>; } return ( <form onSubmit={handleSubmit}> <p>How was your stay at The Prancing Pony?</p> <textarea disabled={isSending} value={text} onChange={(e) => setText(e.target.value)} /> <br /> <button disabled={isSending} type="submit"> Send </button> {isSending && <p>Sending...</p>} </form> ); } // Имитация отправки сообщения. function sendMessage(text) { return new Promise((resolve) => { setTimeout(resolve, 2000); }); }
setIsSent
и setIsSending
вместе, вы можете оказаться в ситуации, когда и isSending
, и isSent
одновременно имеют значение true
. Чем сложнее ваш компонент, тем сложнее будет понять, что произошло.
Поскольку isSending
и isSent
никогда не должны принимать значение true
одновременно, лучше заменить их одной переменной состояния, которая может принимать одно из трех допустимых состояний: «ввод» (typing), «отправка» (sending) и «отправлено» (sent):
Вы также можете объявить некоторые константы для удобства чтения:import { useState } from 'react'; export default function FeedbackForm() { const [text, setText] = useState(''); const [status, setStatus] = useState('typing'); async function handleSubmit(e) { e.preventDefault(); setStatus('sending'); await sendMessage(text); setStatus('sent'); } const isSending = status === 'sending'; const isSent = status === 'sent'; if (isSent) { return <h1>Thanks for feedback!</h1>; } return ( <form onSubmit={handleSubmit}> <p>How was your stay at The Prancing Pony?</p> <textarea disabled={isSending} value={text} onChange={(e) => setText(e.target.value)} /> <br /> <button disabled={isSending} type="submit"> Send </button> {isSending && <p>Sending...</p>} </form> ); } // Имитация отправки сообщения. function sendMessage(text) { return new Promise((resolve) => { setTimeout(resolve, 2000); }); }
Но они не являются переменными состояния, поэтому вам не нужно беспокоиться об их рассинхронизации друг с другом.const isSending = status === 'sending'; const isSent = status === 'sent';
Избегайте избыточного состояния
Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента. Например, рассмотрим такую форму. Он работает, но можете ли вы найти в нем какое-либо избыточное состояние?import { useState } from 'react'; export default function Form() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [fullName, setFullName] = useState(''); function handleFirstNameChange(e) { setFirstName(e.target.value); setFullName(e.target.value + ' ' + lastName); } function handleLastNameChange(e) { setLastName(e.target.value); setFullName(firstName + ' ' + e.target.value); } return ( <> <h2>Let’s check you in</h2> <label> First name: <input value={firstName} onChange={handleFirstNameChange} /> </label> <label> Last name: <input value={lastName} onChange={handleLastNameChange} /> </label> <p> Your ticket will be issued to: <b>{fullName}</b> </p> </> ); }
firstName
, lastName
и fullName
. Однако fullName
является избыточным. Вы всегда можете вычислить fullName
из firstName
и lastName
во время рендеринга, поэтому удалите его из состояния.
Вот как вы можете это сделать:
Здесьimport { useState } from 'react'; export default function Form() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const fullName = firstName + ' ' + lastName; function handleFirstNameChange(e) { setFirstName(e.target.value); } function handleLastNameChange(e) { setLastName(e.target.value); } return ( <> <h2>Let’s check you in</h2> <label> First name: <input value={firstName} onChange={handleFirstNameChange} /> </label> <label> Last name: <input value={lastName} onChange={handleLastNameChange} /> </label> <p> Your ticket will be issued to: <b>{fullName}</b> </p> </> ); }
fullName
не является переменной состояния. Вместо этого он вычисляется во время рендеринга:
В результате обработчикам изменений не нужно делать ничего особенного для его обновления. Когда вы вызываетеconst fullName = firstName + ' ' + lastName;
setFirstName
или setLastName
, вы запускаете повторный рендеринг, а затем следующее значение fullName
будет вычислено из свежих данных.
Не отзеркаливайте пропсы в состоянии
Типичным примером избыточного состояния является такой код:Здесь переменная состоянияfunction Message({ messageColor }) { const [color, setColor] = useState(messageColor);
color
инициализируется пропсом messageColor
. Проблема в том, что если родительский компонент позже передаст другое значение messageColor
(например, «красный» вместо «синий»), переменная состояния цвета не будет обновлена. Состояние инициализируется только во время первого рендеринга.
Вот почему «отзеркаливание» некоторых пропсов в переменной состояния может привести к путанице. Вместо этого используйте проп messageColor
непосредственно в коде. Если вы хотите дать ему более короткое имя, используйте константу:
Таким образом, он не будет рассинхронизирован с пропсом, переданным от родительского компонента. «Зеркалирование» пропсов в состояние имеет смысл только в том случае, если вы хотите игнорировать все обновления для определенного пропса. По соглашению начинайте имя пропса сfunction Message({ messageColor }) { const color = messageColor;
initial
или default
, чтобы уточнить, что его новые значения игнорируются:
function Message({ initialColor }) { // Переменная состояния `color` содержит начальное значение `initialColor`. // Последующие изменения пропса `initialColor` игнорируются. const [color, setColor] = useState(initialColor);
Избегайте дублирования состояния
Этот компонент меню позволяет выбрать один перекус из нескольких:import { useState } from 'react'; const initialItems = [ { title: 'pretzels', id: 0 }, { title: 'crispy seaweed', id: 1 }, { title: 'granola bar', id: 2 }, ]; export default function Menu() { const [items, setItems] = useState(initialItems); const [selectedItem, setSelectedItem] = useState(items[0]); return ( <> <h2>What's your travel snack?</h2> <ul> {items.map((item) => ( <li key={item.id}> {item.title}{' '} <button onClick={() => { setSelectedItem(item); }} > Choose </button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
selectedItem
. Однако это не очень хорошо: содержимое selectedItem
— это тот же объект, что и один из элементов в списке элементов. Это означает, что информация о самом предмете дублируется в двух местах.
Почему это проблема? Давайте сделаем каждый элемент редактируемым:
import { useState } from 'react'; const initialItems = [ { title: 'pretzels', id: 0 }, { title: 'crispy seaweed', id: 1 }, { title: 'granola bar', id: 2 }, ]; export default function Menu() { const [items, setItems] = useState(initialItems); const [selectedItem, setSelectedItem] = useState(items[0]); function handleItemChange(id, e) { setItems( items.map((item) => { if (item.id === id) { return { ...item, title: e.target.value, }; } else { return item; } }) ); } return ( <> <h2>What's your travel snack?</h2> <ul> {items.map((item, index) => ( <li key={item.id}> <input value={item.title} onChange={(e) => { handleItemChange(item.id, e); }} />{' '} <button onClick={() => { setSelectedItem(item); }} > Choose </button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
selectedItem
.
Хотя вы также можете обновить selectedItem
, более простое решение — удалить дублирование. В этом примере вместо объекта selectedItem
(который создает дублирование объектов внутри элементов) вы сохраняете selectedId
в состоянии, а затем получаете selectedItem
путем поиска в массиве элементов элемента с этим идентификатором:
import { useState } from 'react'; const initialItems = [ { title: 'pretzels', id: 0 }, { title: 'crispy seaweed', id: 1 }, { title: 'granola bar', id: 2 }, ]; export default function Menu() { const [items, setItems] = useState(initialItems); const [selectedId, setSelectedId] = useState(0); const selectedItem = items.find((item) => item.id === selectedId); function handleItemChange(id, e) { setItems( items.map((item) => { if (item.id === id) { return { ...item, title: e.target.value, }; } else { return item; } }) ); } return ( <> <h2>What's your travel snack?</h2> <ul> {items.map((item, index) => ( <li key={item.id}> <input value={item.title} onChange={(e) => { handleItemChange(item.id, e); }} />{' '} <button onClick={() => { setSelectedId(item.id); }} > Choose </button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
items = [{ id: 0, title: 'pretzels'}, ...]
selectedItem = {id: 0, title: 'pretzels'}
items = [{ id: 0, title: 'pretzels'}, ...]
selectedId = 0
setItems
вызывает повторный рендеринг, а items.find(...)
найдет элемент с обновленным заголовком. Вам не нужно было удерживать выбранный элемент в состоянии, потому что важен только выбранный идентификатор. Остальное можно рассчитать во время рендера.
Избегайте глубоко вложенных состояний
Представьте план путешествия, состоящий из планет, континентов и стран. У вас может возникнуть соблазн структурировать его состояние с помощью вложенных объектов и массивов, как в этом примере:// App.jsx import { useState } from 'react'; import { initialTravelPlan } from './places.js'; function PlaceTree({ place }) { const childPlaces = place.childPlaces; return ( <li> {place.title} {childPlaces.length > 0 && ( <ol> {childPlaces.map((place) => ( <PlaceTree key={place.id} place={place} /> ))} </ol> )} </li> ); } export default function TravelPlan() { const [plan, setPlan] = useState(initialTravelPlan); const planets = plan.childPlaces; return ( <> <h2>Places to visit</h2> <ol> {planets.map((place) => ( <PlaceTree key={place.id} place={place} /> ))} </ol> </> ); }
// places.js export const initialTravelPlan = { id: 0, title: '(Root)', childPlaces: [ { id: 1, title: 'Earth', childPlaces: [ { id: 2, title: 'Africa', childPlaces: [ { id: 3, title: 'Botswana', childPlaces: [], }, { id: 4, title: 'Egypt', childPlaces: [], }, ], }, { id: 5, title: 'Asia', childPlaces: [ { id: 6, title: 'China', childPlaces: [], }, { id: 7, title: 'Hong Kong', childPlaces: [], }, ], }, ], }, { id: 8, title: 'Mars', childPlaces: [ { id: 9, title: 'Corn Town', childPlaces: [], }, { id: 10, title: 'Green Hill', childPlaces: [], }, ], }, ], };
// App.jsx import { useState } from 'react'; import { initialTravelPlan } from './places.js'; function PlaceTree({ id, placesById }) { const place = placesById[id]; const childIds = place.childIds; return ( <li> {place.title} {childIds.length > 0 && ( <ol> {childIds.map((childId) => ( <PlaceTree key={childId} id={childId} placesById={placesById} /> ))} </ol> )} </li> ); } export default function TravelPlan() { const [plan, setPlan] = useState(initialTravelPlan); const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map((id) => ( <PlaceTree key={id} id={id} placesById={plan} /> ))} </ol> </> ); }
// places.js export const initialTravelPlan = { 0: { id: 0, title: '(Root)', childIds: [1, 8], }, 1: { id: 1, title: 'Earth', childIds: [2, 5], }, 2: { id: 2, title: 'Africa', childIds: [3, 4], }, 3: { id: 3, title: 'Botswana', childIds: [], }, 4: { id: 4, title: 'Egypt', childIds: [], }, 5: { id: 5, title: 'Asia', childIds: [6, 7], }, 6: { id: 6, title: 'China', childIds: [], }, 7: { id: 7, title: 'Hong Kong', childIds: [], }, 8: { id: 8, title: 'Mars', childIds: [9, 10], }, 9: { id: 9, title: 'Corn Town', childIds: [], }, 10: { id: 10, title: 'Green Hill', childIds: [], }, };
- Обновленная версия родительского места должна исключить удаленный идентификатор из массива
childIds
. - Обновленная версия корневого объекта должна включать обновленную версию родительского места.
Вы можете сколько угодно вкладывать состояния, но если сделать их «плоскими», это может решить множество проблем. Это упрощает обновление состояния и помогает избежать дублирования в разных частях вложенного объекта.// App.jsx import { useState } from 'react'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, setPlan] = useState(initialTravelPlan); function handleComplete(parentId, childId) { const parent = plan[parentId]; // Создаем новую версию родительского места, // которая не включает этот дочерний ID. const nextParent = { ...parent, childIds: parent.childIds.filter((id) => id !== childId), }; // Обновляем состояние корневого объекта... setPlan({ ...plan, // ...чтобы он содержал обновленный объект родителя. [parentId]: nextParent, }); } const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map((id) => ( <PlaceTree key={id} id={id} parentId={0} placesById={plan} onComplete={handleComplete} /> ))} </ol> </> ); } function PlaceTree({ id, parentId, placesById, onComplete }) { const place = placesById[id]; const childIds = place.childIds; return ( <li> {place.title} <button onClick={() => { onComplete(parentId, id); }} > Complete </button> {childIds.length > 0 && ( <ol> {childIds.map((childId) => ( <PlaceTree key={childId} id={childId} parentId={id} placesById={placesById} onComplete={onComplete} /> ))} </ol> )} </li> ); }
Улучшение использования памяти
В идеале вы также должны удалить удаленные элементы (и их дочерние элементы) из объекта-таблицы, чтобы оптимизировать использование памяти. Реализация ниже содержит эту логику. Он также использует Immer, чтобы сделать логику обновления более лаконичной.import { useImmer } from 'use-immer'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, updatePlan] = useImmer(initialTravelPlan); function handleComplete(parentId, childId) { updatePlan((draft) => { // Удлаим дочерние ID из родительского `place`. const parent = draft[parentId]; parent.childIds = parent.childIds.filter((id) => id !== childId); // Удалим это место и все его поддерево. deleteAllChildren(childId); function deleteAllChildren(id) { const place = draft[id]; place.childIds.forEach(deleteAllChildren); delete draft[id]; } }); } const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map((id) => ( <PlaceTree key={id} id={id} parentId={0} placesById={plan} onComplete={handleComplete} /> ))} </ol> </> ); } function PlaceTree({ id, parentId, placesById, onComplete }) { const place = placesById[id]; const childIds = place.childIds; return ( <li> {place.title} <button onClick={() => { onComplete(parentId, id); }} > Complete </button> {childIds.length > 0 && ( <ol> {childIds.map((childId) => ( <PlaceTree key={childId} id={childId} parentId={id} placesById={placesById} onComplete={onComplete} /> ))} </ol> )} </li> ); }
Резюме
- Если две переменные состояния всегда обновляются вместе, рассмотрите возможность их объединения в одну.
- Тщательно выбирайте переменные состояния, чтобы избежать создания «невозможных» состояний.
- Структурируйте свое состояние таким образом, чтобы уменьшить вероятность того, что вы совершите ошибку при его обновлении.
- Избегайте избыточного и дублирующего состояния, чтобы вам не нужно было синхронизировать его.
- Не помещайте пропсы в состояние, если вы специально не хотите предотвратить обновления.
- Для шаблонов пользовательского интерфейса, таких как выбор, сохраняйте в состоянии не сам объект, а его идентификатор или индекс.
- Если обновление глубоко вложенного состояния затруднено, попробуйте сделать его плоским.