Добавление интерактивности

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

Реагирование на события

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

Встроенные компоненты, такие как<button>, поддерживают только встроенные события браузера, такие какonClick. Однако вы также можете создавать свои собственные компоненты и давать их пропсам-обработчикам событий любые имена, специфичные для вашего приложения.

Состояние: память компонента

Компонентам часто требуется изменять то, что отображается на экране, в результате взаимодействия. Ввод текста в форму должен обновлять поле ввода, нажатие «далее» в карусели изображений должно менять отображаемое изображение, нажатие «купить» добавляет товар в корзину. Компонентам нужно что-то «запоминать»: текущее значение ввода, текущее изображение, содержимое корзины. В React такая специфичная для компонента память называетсясостоянием.

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

Вот как галерея изображений использует и обновляет состояние при клике:

Рендер и фиксация

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

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

1. Инициированиерендера (передача заказа посетителя на кухню)
2. Рендерингкомпонента (приготовление заказа на кухне)
3. Фиксацияв DOM (размещение заказа на столе)

1. Инициирование
2. Рендеринг
3. Фиксация

Иллюстрации отРэйчел Ли Нэйборс

Состояние как снимок

В отличие от обычных переменных JavaScript, состояние в React ведёт себя скорее как снимок. Его установка не изменяет уже имеющуюся переменную состояния, а вместо этого запускает повторный рендеринг. Сначала это может показаться удивительным!

Такое поведение помогает избежать незаметных ошибок. Вот небольшое чат-приложение. Попробуйте угадать, что произойдёт, если вы сначала нажмёте «Отправить», азатемизмените получателя на Боба. Чьё имя появится вalertчерез пять секунд?

Постановка в очередь серии обновлений состояния

Этот компонент содержит ошибку: нажатие «+3» увеличивает счёт только один раз.

Состояние как снимокобъясняет, почему это происходит. Установка состояния запрашивает новый повторный рендеринг, но не изменяет его в уже выполняющемся коде. Поэтомуscoreпродолжает быть0сразу после вызоваsetScore(score + 1).

Вы можете исправить это, передавфункцию обновленияпри установке состояния. Обратите внимание, как заменаsetScore(score + 1)наsetScore(s => s + 1)исправляет кнопку «+3». Это позволяет ставить в очередь несколько обновлений состояния.

Обновление объектов в состоянии

Состояние может содержать значения любого типа JavaScript, включая объекты. Однако вы не должны напрямую изменять объекты и массивы, которые хранятся в состоянии React. Вместо этого, когда вы хотите обновить объект или массив, вам нужно создать новый (или сделать копию существующего), а затем обновить состояние, чтобы использовать эту копию.

Обычно для копирования объектов и массивов, которые вы хотите изменить, используется синтаксис...spread. Например, обновление вложенного объекта может выглядеть так:

Если копирование объектов в коде становится утомительным, вы можете использовать библиотеку, напримерImmer, чтобы сократить повторяющийся код:

Обновление массивов в состоянии

Массивы — это ещё один тип изменяемых объектов JavaScript, которые можно хранить в состоянии, и к ним следует относиться как к доступным только для чтения. Как и с объектами, когда вы хотите обновить массив, хранящийся в состоянии, вам нужно создать новый (или сделать копию существующего), а затем установить состояние для использования нового массива:

Если копирование массивов в коде становится утомительным, вы можете использовать библиотеку, напримерImmer, чтобы сократить повторяющийся код:

Что дальше?

Перейдите к разделуРеагирование на события, чтобы начать читать эту главу страница за страницей!

Или, если вы уже знакомы с этими темами, почему бы не прочитать оУправлении состоянием?