React中setState的更新策略

React中setState的更新策略

React中的setState有Batch模式(批量更新模式)和普通模式。

普通模式下,setState能够即时更新state，重新调用 render 方法，然后把render方法所渲染的最新的内容显示到页面上。

Batch模式下,React不会立刻修改state。而是把这个对象放到一个更新队列中，稍后才会从队列中把新的状态提取出来合并到 state中，然后再触发组件更新。

1.由 React 控制的事件处理过程 setState 不会同步更新 this.state。如我们使用React库中的表单组件，例如 select、input、button等，它都是处于React库的控制之下，因此setState会以异步的方式执行。
2.React 控制之外的情况， setState 会同步更新 this.state。通过JavaScript原生addEventListener直接添加的事件处理函数，使用setTimeout/setInterval 等setState会以同步的方式执行。

解决异步更新

需要state状态同步更新或state状态改变后去处理逻辑。

1.使用setTimeout或setInterval

 componentDidMount(){
    setTimeout(() => {
      this.setState({
        value: this.state.value + 1
      })
      console.log('value', this.state.value)   
    }, 0)
}

2.使用setState的回调函数

this.setState({
      value: this.state.value + 1
    }, () => {
      console.log('value', this.state.value) // 更新后的state
})