Одна из частей React, которая ставит людей в тупик, — это понимание состояния и способов его обновления. Большая часть этой путаницы происходит из-за того, что setState является асинхронным.
Как пишут в React docs:
Считайте setState() запросом, а не непосредственной командой для обновления компонента.
(Примечание: я буду иметь в виду setState, но это в равной степени применимо и к хуку useState, который мы рассмотрим позже)
Поэтому, если я хочу обновиться немедленно, я должен просто обновить объект состояния напрямую… правильно?
this.state.myValue = 'newValue';
НЕТ! Если вы сделаете это, вы откажетесь от обработки React, и ваш компонент не будет повторно отображаться.
Причина, по которой setState существует, заключается в том, чтобы позволить React создавать более эффективный и лучший опыт для конечного пользователя. Группируя обновления состояния, он может предотвратить ненужный повторный рендеринг и позволить React еще более разумно обрабатывать обновления с различными приоритетами, также известный как параллельный режим.
Хорошо, хорошо, я буду использовать setState. Но как насчет странного синтаксиса функции обновления? Мне точно это не нужно?
На самом деле вы делаете.
setState (и useState) имеют две формы: функцию обновления и синтаксис объекта stateChange.
Какой из них я должен использовать, когда?
Вот краткое практическое правило.
Если ваше следующее состояние зависит от текущего состояния, используйте функцию обновления. В противном случае вы можете передать объект в синтаксисе stateChange.
Например:
- обновление счетчика (функция обновления)
- обновление объекта (функция обновления)
- переключение логического значения (функция обновления)
- установка нового строкового значения (объект stateChange)
Как насчет хуков и useState?
Все вышеперечисленные случаи в равной степени применимы к хуку useState.
Там, где вы использовали бы функцию обновления в setState, используйте функцию обновления в вашей функции установки ловушек.
См. приведенные ниже примеры в хуках setState и useState.
Так как насчет шпаргалки?
Большинство ситуаций можно свести к одному из нескольких примеров, показанных ниже:
Обновление счетчика
Зависит от предыдущего состояния, используйте функцию обновления
Обновление объекта
Зависит от предыдущего состояния, используйте функцию обновления
Переключение логического значения
Зависит от предыдущего состояния, используйте функцию обновления
Установка нового строкового значения
Не полагается на предыдущее состояние, используйте объект stateChange
Обернуть
Состояние компонента — одна из основных концепций, которые вам нужно понимать в React. Запомните эти простые правила, и setState вас больше никогда не смутит!
- Никогда не изменяйте состояние напрямую: всегда используйте setState или функцию установки useState.
- Если ваше следующее состояние зависит от текущего состояния, используйте функцию обновления.
Первоначально опубликовано на https://chriscolborne.com 4 февраля 2020 г.
