setState内部逻辑和异步更新

文章 React 中setState更新state何时同步何时异步？

setState(newState)
setState((curState, curProps) => newState, callback)

内部逻辑:

1. 更新state
2. 生成vnodes
3. 执行diff算法
4. 根据差异，执行最小渲染

涉及的生命周期:

• shouldComponentUpdate
• componentWillUpdate / getSnapshotForUpdate
• render
• componentDidUpdate

父组件的state通过prop传递给子组件，state改变时，会触发子组件的重新渲染(componentWillReceiveProps)

异步批量更新state,目的是避免性能问题

何时异步更新：

• react控制的事件处理函数 调用setState
• 生命周期钩子 调用setState

class TestSetState extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 10,
    };

    this.handleClickOne = this.handleClickOne.bind(this);
    this.handleClickTwo = this.handleClickTwo.bind(this);
  }

  handleClickOne() {
    // 类原型对象上的事件处理函数  异步setState
    this.setState({ count: this.state.count + 1 }); // 异步1
    console.log(this.state.count); // 10
  }

  handleClickTwo() {
    setTimeout(() => {
      this.setState({ count: this.state.count + 1 }); // 同步
      console.log(this.state.count); // 11
    }, 10);
  }

  componentDidMount() {
    document.getElementById("btn").addEventListener("click", () => {
      this.setState({ count: this.state.count + 1 }); // 同步
      console.log(this.state.count); // 11
    });
  }

  render() {
    return (
      <>
        <h1>测试setState同步或异步执行 count: {this.state.count}</h1>
        <button onClick={this.handleClickOne}>clickOne</button>
        <button onClick={this.handleClickTwo}>clickTwo</button>
        <button id="btn">clickTwo</button>
      </>
    );
  }
}

在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中延时更新，而 isBatchingUpdates 默认是 false，