Когда использовать функциональный setState

Функция React setState предоставляет два синтаксиса для обновления состояния компонента: синтаксис прямого назначения и синтаксис функционального средства обновления.

Синтаксис прямого присваивания:

this.setState({pictures: pics})

Этот синтаксис прост и удобен в использовании. Он напрямую заменяет существующее значение состояния новым предоставленным значением. Однако это может привести к потенциальным проблемам, если значение состояния используется в нескольких местах или манипулируется методами жизненного цикла компонента.

Синтаксис функционального средства обновления:

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

Синтаксис функционального средства обновления является предпочтительным, поскольку он гарантирует, что обновление состояния является последовательным и предсказуемым. Он принимает предыдущее состояние в качестве аргумента и возвращает обновленное состояние. Это предотвращает случайные мутации состояния и гарантирует, что оно всегда актуально.

Слияние и пакетная обработка

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

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

Синтаксис функционального средства обновления автоматически правильно объединяет обновления, в результате чего окончательное состояние отражает как изображения 1, так и изображения 2.

Производительность и эффективность

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

Заключение

Хотя оба синтаксиса могут использоваться для обновления состояния, синтаксис функционального средства обновления обычно рекомендуется из-за его согласованности, безопасности, возможностей слияния и поддержки оптимизации производительности. Используя синтаксис функционального средства обновления, разработчики могут избежать проблем с мутацией состояния и гарантировать правильное и эффективное обновление своих компонентов.