setState有同步和异步更新两种方式。

问题

• 为什么 setState 有异步更新？
• 什么情况下异步更新，什么情况下同步更新？
• 在异步更新情况下，如果想依赖上一次 state 值，如何使用？
• 异步更新在效果上有什么表现？

为什么 setState 有异步更新？

React 在执行 setState 之后，要执行render、diff、更新DOM等一系列操作，性能开销比较大。加入异步更新、更新合并等策略能优化性能。
情况举例：

• 比如事件的触发可能会短期内触发很多次，如滚动窗口，放大缩小等；
• 频率太快会带来性能上的卡顿；
• 那么内部就会做一些合并。

什么情况下异步更新，什么情况下同步更新？

异步更新：组件里等事件处理程序，如onClick={this.hancleClick}里面等setState是异步更新。声明生命周期函数里等setState也是异步更新。如果需要多次更新需要用异步设置等语法，如

this.setState((state, props) => {
    return {count: state.count + props.count}
})

同步更新：如 setTimeout 里，对原生绑定如 addEventListener 里，都是同步更新。

在异步更新情况下，如果想依赖上一次 state 值，如何使用？

// 不依赖上一次 state 值
onPlus1() { 
    // React 自带的事件监听函数里，是用异步方式更新
    this.setState({ count1: this.state.count1 + 1 }) 
    this.setState({ count1: this.state.count1 + 1 }) 
} 
// 依赖上一次 state 值
onPlus2() {
    // React 自带的事件监听函数里，是用异步方式更新。要想多次更新并且后一次依赖上一次结果，请使用异步写法 
    this.setState(state => { return { count2: state.count2 + 1 } }) 
    this.setState(state => { return { count2: state.count2 + 1 } }) 
}

异步更新在效果上有什么表现

表现为更新合并，上次更新未生效。

import React from 'react';
import ReactDOM from 'react-dom';

class Counter extends React.Component {

  constructor(props){
    super(props)
    this.state = {
      count0: 0,
      count1: 0,
      count2: 0,
      count3: 0,
      count4: 0
    }
  }

  render() {
    console.log('render')
    return (
      <div>
        <div>{this.state.count0}</div>
        <div>{this.state.count1}<button onClick={this.onPlus1.bind(this)}> Plus 1 </button></div>
        <div>{this.state.count2}<button onClick={this.onPlus2.bind(this)}> Plus 2 </button></div>
        <div>{this.state.count3}<button onClick={this.onPlus3.bind(this)}> Plus 3 </button></div>
        <div>{this.state.count4}<button id="btn4"> Plus 4 </button></div>
      </div>
    )
  }

  componentDidMount() {
    /*在生命周期函数里更新是异步的，两次更新只会生效一次
      等价于
      let count0 = this.state.count0
      this.setState({count0: count0 + 1})
      this.setState({count0: count0 + 1})
    */
    this.setState({
      count0: this.state.count0 + 1
    })
    this.setState({
      count0: this.state.count0 + 1
    })

    document.querySelector('#btn4').onclick = () => {
      // 对于用这种方式绑定事件，React智商不够无法理解，于是用同步方式更新
      this.setState({
        count4: this.state.count1 + 1
      })
      this.setState({
        count1: this.state.count1 + 1
      })
    }
  }

  onPlus1() {
    // React 自带的事件监听函数里，是用异步方式更新
    this.setState({
      count1: this.state.count1 + 1
    })
    this.setState({
      count1: this.state.count1 + 1
    })
  }

  onPlus2() {
    // React 自带的事件监听函数里，是用异步方式更新。要想多次更新并且后一次依赖上一次结果，请使用异步写法
    this.setState(state => {
      return { count2: state.count2 + 1 }
    })
    this.setState(state => {
      return { count2: state.count2 + 1 }
    })
  }

  onPlus3() {
    setTimeout(() => {
      // setTimeout里的更新是同步的
      this.setState({
        count3: this.state.count3 + 1
      })
      this.setState({
        count3: this.state.count3 + 1
      })
    })
  }

}

ReactDOM.render(<Counter />, document.querySelector("#root"))