React之setState的用法

setState有两种书写方式

1. setState(updater, [callback])：
   updater为返回stateChange对象的函数: (state, props) => stateChange。接收的state和props被保证为最新的

this.setState((state)=>({
  count: state.count + 1
}),()=>{
  console.log(this.state.count)
})

2. setState(stateChange, [callback])：
   stateChange为对象，对象方式是函数方式的简写方式

this.setState({
  count: 0
})

callback是可选的回调函数, 在状态更新且界面更新后才执行。

什么时候用哪种方式?
如果新状态不依赖于原状态，使用对象方式
如果新状态依赖于原状态，使用函数方式
如果需要在setState()后获取最新的状态数据, 在callback函数中读取

setState更新方式

1. 根据执行setState的位置不同，可以分为异步or同步更新
   在react控制的回调函数中(生命周期勾子 / react事件监听回调)，异步更新。即在同一个方法中执行多次setState，只调用一次render()更新界面。
   在非react控制的异步回调函数中( 定时器回调 / 原生事件监听回调 / promise回调 /...)，同步更新。即每执行一次setState，调用一次render()更新界面。

2. 异步更新时，使用不同的setState书写方式，React是的处理方式也是不同的
   首先，前面说过异步更新时只调用一次render()更新界面，即界面更新合并了。不同的是：
   setState({}): 在同一方法中不管使用多少次，都合并更新一次状态。也就是状态更新也合并了。
   setState(fn): 在同一方法中使用多少次更新多少次状态。状态更新没有合并。

为什么会这样？
setState(fn)可以把上次更新后的状态拿来作为参数使用，所有setState(fn)的状态更新不会合并

      class StateTest extends React.Component {
        state = {
          count: 0,
        };

        componentDidMount() {
          this.setState({ count: this.state.count + 1 });  
          this.setState({ count: this.state.count + 1 });  
          // 这两条合并成了一条，相当于
          // this.setState({ 
          //   count: this.state.count + 1,
          //   count: this.state.count + 1,
          // });  
          console.log('[1]', this.state.count); // 2 ==> 0

          this.setState((state) => ({ count: state.count + 1 }));
          this.setState((state) => ({ count: state.count + 1 }));
          console.log('[2]', this.state.count); // 3 ==> 0

          setTimeout(() => {
            this.setState({ count: this.state.count + 1 });
            console.log('timeout', this.state.count); // 10 ==> 6

            this.setState({ count: this.state.count + 1 });
            console.log('timeout', this.state.count); // 12 ==> 7
          }, 0);

          Promise.resolve().then((value) => {
            this.setState({ count: this.state.count + 1 });
            console.log('promise', this.state.count); // 6 ==>4

            this.setState({ count: this.state.count + 1 });
            console.log('promise', this.state.count); // 8 ==> 5
          });
        }

        render() {
          const count = this.state.count;
          console.log('render', count); // 1 ==> 0   4 ==>3   5 ==>4  7 ==>5  9 ==>6  11 ==>7
          return (
            <div>
              <p>{count}</p>
            </div>
          );
        }
      }