Разница между присваиванием this.state.x = 4 и this.setState({x: 4})

#javascript #reactjs

Я не понимаю в чем разница между вот этими присваиваниями в React: 



this.state.x = 4;






this.setState({
x: 4
})




Так же я не понимаю, почему, когда я присваиваю значение первым способом, то если
запустить alert сразу после присваивания, я увижу то значение, которое я только что
присвоил. Если же я присвоил значение вторым способом, по alert выведет предыдущее
значение этой переменной.
Из-за этого была проблема с программой. Я присваивал вторым способом, думал, что
в этой же функции уже будет новое значение, а оказалось - нет
    

Ответы

Ответ 1

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

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

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


Ответ 2

Кратко смысл в том, что state нужно устанавливать только через setState() – т.к.
это вызовет некоторые события, а также является операцией асинхронной. 

Подробнее первоисточник – документация React компонентов (на англ.)


  Notes:
  NEVER mutate this.state directly, as calling setState() afterwards may replace
the mutation you made. Treat this.state as if it were immutable.
  
  setState() does not immediately mutate this.state but creates a pending state transition.
Accessing this.state after calling this method can potentially return the existing value.
  
  There is no guarantee of synchronous operation of calls to setState and calls may
be batched for performance gains.
  
  setState() will always trigger a re-render unless conditional rendering logic is
implemented in shouldComponentUpdate(). If mutable objects are being used and the logic
cannot be implemented in shouldComponentUpdate(), calling setState() only when the
new state differs from the previous state will avoid unnecessary re-renders.


Перевод (отсюда):


  Примечания: НИКОГДА не изменяйте this.state непосредственно, вызовом setState()
  который после может заменить изменения которые вы сделали.
  Обрабатывайте this.state, как будто оно было неизменным.
  
  setState() не сразу изменяет this.state, но создает состояние
  отложенного перехода. Доступ this.state после вызова этого метода
  потенциально может вернуть существующее значение.
  
  Нет никакой гарантии, синхронной работы операций вызова setState,
  вызовы могут группироваться в целях повышения производительности.
  
  setState() всегда будет вызывать повторный рендеринг, пока условная
  логика рендеринга не реализуется в shouldComponentUpdate(). Если
  изменяемые объекты используются и логика не может быть реализована в
  shouldComponentUpdate(), вызывается setState() только тогда, когда
  новое состояние отличается от предыдущего состояния чтобы избежать
  ненужного ререндеринга.