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

  • Источник обновления состояния, например. дочерние компоненты обновляют состояние родителя
  • Частота и скорость, с которой выполняются обновления состояния.

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

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

1. Простой setState с объектом состояния

this.setState({ name: 'John' })

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

2. Обновление состояния, за которым сразу же следует действие, использующее новое состояние.

В ситуации, когда вам нужно обновить состояние и получить доступ к this.state впоследствии, лучший способ сделать это — передать функцию callBack, которая будет вызываться, когда реакция завершит обновление состояния.

this.setState({ name: 'John' }, callBackFn)

Как только реакция обновит состояние, она вызовет функцию callBack. Таким образом, вы будете уверены, что при доступе к this.state вы будете обращаться к обновленному объекту состояния.

3. Обновления состояния происходят быстро и из разных мест

Предположим, у вас есть компонент, который имеет несколько дочерних компонентов. Состояние основного компонента может быть обновлено дочерними компонентами, и эти обновления могут привести к большему количеству обновлений состояния. В такой ситуации вы можете обнаружить, что в какой-то момент объект состояния не будет содержать ранее обновленные значения. Это произойдет, если вы обновите состояние, используя setState и передав путь/объект состояния.

updateDateModel(newValue) {
   const newDataModel = Object.assign({}, this.state.dataModel, newValue)
   this.setState({ dataModel: newDataModel })
}

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

Чтобы избежать этого, мы перепишем приведенный выше код так, чтобы он выглядел как

updateDataModel(newValue) {
  this.setState((prevState, props) => ({ dataPoint:      {...prevState.dataModel, ...newValue}}));
}

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

Вы можете прочитать больше на https://reactjs.org/docs/state-and-lifecycle.html

Я надеюсь, что это было полезно.

Удачного кодирования!