Обновление состояния — это основная функция реагирующих приложений, и вам придется обновлять состояние ваших компонентов в тот или иной момент. В зависимости от характера, дизайна или компонентов, существует несколько способов добиться этого. Несколько других вещей, с которыми я столкнулся, и которые имеют большое значение для того, чтобы напрямую влиять на обновление состояния и поведение вашего приложения:
- Источник обновления состояния, например. дочерние компоненты обновляют состояние родителя
- Частота и скорость, с которой выполняются обновления состояния.
Основная причина, по которой приведенные выше пункты влияют на поведение вашего приложения, заключается в том, что обновления состояния в реакции являются асинхронными.
Ниже я расскажу о различных методах обновления состояния и о том, когда их лучше всего использовать.
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
Я надеюсь, что это было полезно.
Удачного кодирования!