Блог

Почему мы используем / рекомендуется использовать неизменяемый подход при изменении состояния

например, почему люди создают копию состояния перед изменением

Например

 this state = {
a: 'apple'
b:'ball'
}
  

а затем для изменения состояния

 const copyState = {...this.state} 
copyState.b = bunny 
this.setState({...copyState})
  

например, почему бы просто

 this.setState({b:bunny})
 
  

Потому что в React работа с состоянием является полностью функциональным процессом. Это означает, что состояние является неизменяемым. И если бы вы написали this.setState({b: 'bunny'}) и распечатали this.state , это было бы только распечатано b: bunny , а не a: 'apple' также.

Также ваш пример можно упростить. Вместо присвоения copyState переменной объекту, вы могли бы написать следующее:

 this.setState({
  ...this.state,
  b: 'bunny',
})
  

TLDR;
Вы не можете добавлять значения к состоянию, оно доступно только для чтения. Вам нужно переназначить состояние.

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

 updateState(event) {
 const {name, value} = event.target;
 let user = this.state.user; // this is a reference, not a copy...
 user[name] = value; // so this mutates state ?
 return this.setState({user});
}
  

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

Никогда не изменяйте this.state напрямую, поскольку последующий вызов setState() может заменить внесенную вами мутацию. Обрабатывайте это состояние так, как если бы оно было неизменяемым.

Почему?

• Пакеты setState работают за кулисами. Это означает, что изменение состояния вручную может быть переопределено при обработке setState.
• Если вы объявите метод shouldComponentUpdate, вы не сможете использовать проверку равенства === внутри, потому что ссылка на объект не изменится. Таким образом, описанный выше подход также потенциально влияет на производительность.

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

Источник: Состояние обработки в React: четыре неизменяемых подхода для рассмотрения

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

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

Для более детального понимания вы можете ознакомиться с — https://daveceddia.com/why-not-modify-react-state-directly