Реакция на события в React компонентах
год назад·8 мин. на чтение
React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.
Содержание туториала по React
React позволяет добавлять обработчики событий в JSX. Обработчики событий — это ваши собственные функции, которые будут запускаться в ответ на такие действия, как клик, наведение курсора, фокусировка на поле ввода формы и т.д.
Вы определили функцию
Разница тонкая. В первом примере функция
Когда вы пишете код инлайном (определение в той же строке), та же ловушка проявляется по-другому:
Такой инлайн код не срабатывает при клике — он срабатывает каждый раз, когда компонент отрисовывается:
В этом примере
При нажатии на кнопку:
Добавление обработчиков событий
Чтобы добавить обработчик событий, сначала нужно определить функцию, а затем передать ее в качестве пропса соответствующему тегу JSX. Например, вот кнопка, которая пока ничего не делает:Вы можете заставить компонент показывать сообщение, когда пользователь нажимает на кнопку. Для этого нужно выполнить три следующих шага:export default function Button() { return <button>I don't do anything</button>; }
- Объявите функцию с именем
handleClick
внутри компонентаButton
. - Реализуйте логику внутри этой функции (используйте
alert
для отображения сообщения). - Добавьте
onClick={handleClick}
в<button>
.
export default function Button() { function handleClick() { alert('You clicked me!'); } return <button onClick={handleClick}>Click me</button>; }
handleClick
, а затем передали ее как проп в <button>
. handleClick
— это обработчик событий. Обработчик событий:
- Обычно определяется внутри ваших компонентов.
- Имеет имена, которые начинаются с
handle
, за которым следует имя события.
handle
, за которым следует имя события. Вы часто будете видеть onClick={handleClick}
, onMouseEnter={handleMouseEnter}
и т.д.
По-другому вы можете определить встроенный обработчик событий в JSX:
Или, более кратко, используя функцию стрелки:<button onClick={function handleClick() { alert('You clicked me!'); }}>
Все эти стили эквивалентны. Инлайновые обработчики событий удобны для коротких функций.<button onClick={() => { alert('You clicked me!'); }}>
Особенности передачи обработчиков событий
Функции, передаваемые обработчикам событий, должны отправляться, а не вызываться. Например:отправка функции (верно) | вызов функции (неверно) |
---|---|
<button onClick={handleClick}> | <button onClick={handleClick()}> |
handleClick
передается как обработчик события onClick
. Это говорит React запомнить ее и вызывать функцию только тогда, когда пользователь нажимает кнопку.
Во втором примере ()
в конце handleClick()
запускает функцию сразу же во время рендеринга, без каких-либо кликов. Это связано с тем, что JavaScript внутри JSX {
и }
выполняется сразу.
отправка функции (верно) | вызов функции (неверно) |
---|---|
<button onClick={() => alert('...')}> | <button onClick={alert('...')}> |
Если вы хотите определить инлайн (встроенный) обработчик событий, оберните его в анонимную функцию следующим образом:// Это оповещение срабатывает при рендеринге компонента, а не при нажатии! <button onClick={alert('You clicked me!')}>
Вместо выполнения кода внутри при каждом рендеринге создается функция, которая будет вызываться позже. В обоих случаях мы хотим передать функцию:<button onClick={() => alert('You clicked me!')}>
<button onClick={handleClick}>
передает функциюhandleClick
.<button onClick={() => alert('...')}>
передает функцию() => alert('...')
.
Чтение пропсов в обработчиках событий
Поскольку обработчики событий объявляются внутри компонента, они имеют доступ к пропсам компонента. Вот кнопка, при нажатии на которую отображается предупреждение с сообщениемmessage
:
Это позволяет этим двум кнопкам отображать разные сообщения.function AlertButton({ message, children }) { return <button onClick={() => alert(message)}>{children}</button>; } export default function Toolbar() { return ( <div> <AlertButton message="Playing!">Play Movie</AlertButton> <AlertButton message="Uploading!">Upload Image</AlertButton> </div> ); }
Передача обработчиков событий в качестве пропса
Часто требуется, чтобы родительский компонент указывал обработчик событий дочернего элемента. Рассмотрим кнопки: в зависимости от того, где вы используете компонентButton
, вы можете захотеть выполнить другую функцию — возможно, одна воспроизводит фильм, а другая загружает изображение.
Для этого передайте проп, который компонент получает от своего родителя, в качестве обработчика событий, например:
Здесь компонентfunction Button({ onClick, children }) { return <button onClick={onClick}>{children}</button>; } function PlayButton({ movieName }) { function handlePlayClick() { alert(`Playing ${movieName}!`); } return <Button onClick={handlePlayClick}>Play "{movieName}"</Button>; } function UploadButton() { return <Button onClick={() => alert('Uploading!')}>Upload Image</Button>; } export default function Toolbar() { return ( <div> <PlayButton movieName="Kiki's Delivery Service" /> <UploadButton /> </div> ); }
Toolbar
отображает PlayButton
и UploadButton
:
PlayButton
передаетhandlePlayClick
в качестве пропсаonClick
внутренней кнопке.UploadButton
передает() => alert('Uploading!')
в качестве пропсаonClick
дляButton
, который находится внутри.
Button
принимает проп onClick
. Он передает этот проп непосредственно встроенной в браузер кнопке <button>
с onClick={onClick}
. Это говорит React вызывать переданную функцию по клику.
Если вы используете дизайн-систему, такие компоненты, как кнопки, обычно содержат стили, но не определяют поведение. Вместо этого такие компоненты, как PlayButton
и UploadButton
, будут передавать обработчики событий вниз.
Именование пропсов обработчика событий
Встроенные компоненты, такие как<button>
и <div>
, поддерживают только имена событий браузера, такие как onClick
. Однако, когда вы создаете свои собственные компоненты, вы можете называть пропсы их обработчиков событий как угодно.
По соглашению пропсы обработчиков событий должны начинаться с on
, за которым следует заглавная буква.
Например, проп onClick
компонента Button
можно было бы назвать onSmash
:
function Button({ onSmash, children }) { return <button onClick={onSmash}>{children}</button>; } export default function App() { return ( <div> <Button onSmash={() => alert('Playing!')}>Play Movie</Button> <Button onSmash={() => alert('Uploading!')}>Upload Image</Button> </div> ); }
<button onClick={onSmash}>
показывает, что браузерному <button>
(нижний регистр) по-прежнему требуется проп onClick
, но имя пропса, полученное вашим пользовательским компонентом Button
, зависит от вас.
Когда ваш компонент поддерживает несколько взаимодействий, вы можете назвать пропсы обработчика событий по именам конкретных действий. Например, компонент Toolbar
получает обработчики событий onPlayMovie
и onUploadImage
:
Обратите внимание, что компонентуexport default function App() { return ( <Toolbar onPlayMovie={() => alert('Playing!')} onUploadImage={() => alert('Uploading!')} /> ); } function Toolbar({ onPlayMovie, onUploadImage }) { return ( <div> <Button onClick={onPlayMovie}>Play Movie</Button> <Button onClick={onUploadImage}>Upload Image</Button> </div> ); } function Button({ onClick, children }) { return <button onClick={onClick}>{children}</button>; }
App
не нужно знать, что Toolbar
будет делать с onPlayMovie
или onUploadImage
. Это деталь реализации компонента Toolbar
. Здесь Toolbar
передает их как обработчики onClick
своим компонентам Button
, но позже он также может запускать их с помощью сочетания клавиш. Именование пропсов в честь специфичных в приложении действий, таких как onPlayMovie
, дает вам возможность изменить способ их использования позже.
Распространение события (Event Propagation)
Обработчики событий также будут перехватывать события от любых дочерних элементов вашего компонента. Мы говорим, что событие «пузырится» или «распространяется» вверх по дереву: оно начинается там, где произошло событие, а затем идет вверх по дереву. Этот<div>
содержит две кнопки. И <div>
, и каждая кнопка имеют свои собственные обработчики onClick
. Как вы думаете, какие обработчики сработают, когда вы нажмете кнопку?
Если вы нажмете на любую кнопку, ееexport default function () { return ( <div className="Toolbar" onClick={() => { alert('You clicked on the toolbar!'); }} > <button onClick={() => alert('Playing!')}>Play Movie</button> <button onClick={() => alert('Uploading!')}>Upload Image</button> </div> ); }
onClick
будет запущен первым, а затем onClick
родителя <div>
. Таким образом, появятся два сообщения. Если вы щелкнете по самому Toolbar
, запустится onClick
только родительского элемента <div>
.
Все события в React распространяются, кроме onScroll
, который работает только с тегом JSX, к которому вы его прикрепляете.
Остановка распространения события
Обработчики событий получают объект события в качестве единственного аргумента. По соглашению его обычно называютe
, что означает "event" ("событие"). Вы можете использовать этот объект для чтения информации о событии.
Этот объект события также позволяет остановить распространение. Если вы хотите, чтобы событие не достигало родительских компонентов, вам нужно вызвать e.stopPropagation()
, как это делает этот компонент Button
:
function Button({ onClick, children }) { return ( <button onClick={(e) => { e.stopPropagation(); onClick(); }} > {children} </button> ); } export default function Toolbar() { return ( <div className="Toolbar" onClick={() => { alert('You clicked on the toolbar!'); }} > <Button onClick={() => alert('Playing!')}>Play Movie</Button> <Button onClick={() => alert('Uploading!')}>Upload Image</Button> </div> ); }
- React вызывает обработчик
onClick
, переданный<button>
. - Этот обработчик, определенный в
Button
, делает следующее:- Вызывает
e.stopPropagation()
, предотвращая дальнейшее всплытие события. - Вызывает функцию
onClick
, которая является пропсом, переданным из компонентаToolbar
.
- Вызывает
- Эта функция, определенная в компоненте
Toolbar
, отображает собственное оповещение кнопки. - Поскольку распространение было остановлено, обработчик
onClick
родительского элемента<div>
не запускается.
e.stopPropagation()
при нажатии на кнопки теперь отображается только одно предупреждение (от <button>
), а не два из них (от <button>
и родительской Toolbar
<div>
). Клик по кнопке — это не то же самое, что клик по окружающему Toolbar
, поэтому остановка распространения имеет смысл для этого пользовательского интерфейса.
Захват событий
В редких случаях вам может понадобиться перехватывать все события дочерних элементов, даже если они остановили распространение. Например, может быть, вы хотите регистрировать каждый клик в аналитике, независимо от логики распространения. Вы можете сделать это, добавивCapture
в конце имени события:
Каждое событие распространяется в три этапа:<div onClickCapture={() => { /* запускается первым */ }} > <button onClick={(e) => e.stopPropagation()} /> <button onClick={(e) => e.stopPropagation()} /> </div>
- Он перемещается вниз, вызывая все обработчики
onClickCapture
. - Он запускает обработчик
onClick
выбранного элемента. - Он перемещается вверх, вызывая все обработчики
onClick
.
Передача обработчиков как альтернатива распространению
Обратите внимание, как этот обработчик кликов запускает код, а затем вызывает пропonClick
, переданное родителем:
Вы также можете добавить дополнительный код в этот обработчик перед вызовом родительского обработчика событияfunction Button({ onClick, children }) { return ( <button onClick={(e) => { e.stopPropagation(); onClick(); }} > {children} </button> ); }
onClick
. Этот шаблон обеспечивает альтернативу распространению. Это позволяет дочернему компоненту обрабатывать событие, а также позволяет родительскому компоненту указывать дополнительное поведение. В отличие от распространения, оно не происходит автоматически. Но преимущество этого паттерна в том, что вы можете четко проследить всю цепочку кода, которая выполняется в результате какого-то события.
Если вы полагаетесь на распространение и сложно отследить, какие обработчики выполняются и почему, попробуйте вместо этого этот подход.
Предотвращение поведения по умолчанию
С некоторыми событиями браузера связано поведение по умолчанию. Например, событие отправки<form>
, которое происходит при нажатии кнопки внутри него, по умолчанию перезагружает всю страницу:
Вы можете вызватьexport default function Signup() { return ( <form onSubmit={() => alert('Submitting!')}> <input /> <button>Send</button> </form> ); }
e.preventDefault()
для объекта события, чтобы этого не произошло:
Не путайтеexport default function Signup() { return ( <form onSubmit={(e) => { e.preventDefault(); alert('Submitting!'); }} > <input /> <button>Send</button> </form> ); }
e.stopPropagation()
и e.preventDefault()
. Они оба полезны, но не связаны между собой:
e.stopPropagation()
останавливает срабатывание обработчиков событий, прикрепленных к указанным выше тегам.e.preventDefault()
предотвращает поведение браузера по умолчанию для нескольких событий, которые его содержат.
Могут ли обработчики событий иметь побочные эффекты?
Да, могут. Обработчики событий — лучшее место для побочных эффектов. В отличие от функций рендеринга, обработчики событий не обязательно должны быть чистыми, поэтому это отличное место для того, чтобы что-то изменить — например, изменить значение инпута в ответ на ввод или изменить список в ответ на нажатие кнопки. Однако для того, чтобы изменить некоторую информацию, вам сначала нужно каким-то образом ее сохранить. В React это делается с помощью состояния - памяти компонента. Обо всем этом вы узнаете в следующей части.Резюме
- Вы можете обрабатывать события, передавая функцию в качестве пропса элементу, такому как
<button>
. - Обработчики событий должны передаваться, а не вызываться.
onClick={handleClick}
, а неonClick={handleClick()}
. - Вы можете определить функцию обработчика событий отдельно или встроенную (инлайн).
- Обработчики событий определяются внутри компонента, поэтому они могут получить доступ к пропсам.
- Вы можете объявить обработчик событий в родительском элементе и передать его в качестве пропса дочернему элементу.
- Вы можете определить свои собственные пропсы обработчика событий с именами, специфичными для приложения.
- События распространяются вверх. Вызовите
e.stopPropagation()
для первого аргумента, чтобы это предотвратить. - События могут иметь нежелательное поведение браузера по умолчанию. Вызовите
e.preventDefault()
, чтобы это предотвратить. - Явный вызов пропса обработчика событий из дочернего обработчика является хорошей альтернативой распространению события.
Какую структуру состояния React выбрать
год назад·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> ); }
Резюме
- Если две переменные состояния всегда обновляются вместе, рассмотрите возможность их объединения в одну.
- Тщательно выбирайте переменные состояния, чтобы избежать создания «невозможных» состояний.
- Структурируйте свое состояние таким образом, чтобы уменьшить вероятность того, что вы совершите ошибку при его обновлении.
- Избегайте избыточного и дублирующего состояния, чтобы вам не нужно было синхронизировать его.
- Не помещайте пропсы в состояние, если вы специально не хотите предотвратить обновления.
- Для шаблонов пользовательского интерфейса, таких как выбор, сохраняйте в состоянии не сам объект, а его идентификатор или индекс.
- Если обновление глубоко вложенного состояния затруднено, попробуйте сделать его плоским.