你真的会用setState吗？

setState函数是什么？

1. 将需要处理的变化塞入组建的state对象中
2. 告诉该组件及其子组件需要用更新的状态来重新渲染
3. 响应事件处理喝服务端响应更新用户界面的主要方式

setState经典例子

constructor(props) {
    super(props);
    this.state = {
        count: 0
    };
    this.increase = this.increase.bind(this);
}

increase() {
    this.setState({ count: this.state.count + 1 });
    // 第一次输出
    console.log('第一次输出：', this.state.count);
    
    this.setState({ count: this.state.count + 1 });
    // 第二次输出
    console.log('第二次输出：', this.state.count);
    
    setTimeout(() => {
        this.setState({ count: this.state.count + 1 });
        // 第三次输出
        console.log('第三次输出：', this.state.count);
        
        this.setState({ count: this.state.count + 1 });
        // 第四次输出
        console.log('第四次输出：', this.state.count);
    }, 1000)
}

不知道你们心里是否有上面代码的答案了呢？不错，正确输出是：0 0 2 3。那可能刚开始学React的童鞋就会问了？为什么前面都是0，后面的正常加了了？那这个setState究竟是同步的还是异步的了？那么，接下来就为你解答心中的疑惑=。=

合并更新

前两次的setState，不会立即改变React组件中的state的值，这两次输出的都是0；合并更新，将多次的setState合并成一次，不引发重复渲染

setTimeout 同步更新，引发两次渲染。

setState是异步的吗？

其实，这只是React的障眼法。

setState是同步执行的！但是state并不一定会同步更新（异步更新合同步更新都存在）

那setState究竟干了什么了？

setState()中有个特别重要的布尔属性isBatchingUpdates(默认为false)，它决定了state是同步更新还是异步更新。

setState只在合成事件何钩子函数中是“异步更新”的。

异步更新的背后，是同步代码处理（“合成事件何钩子函数”的调用在“更新”前）。

异步是为了实现批量更新的手段，也是React新能优化的一种方式。

为什么直接修改this.state无效

要知道setState本质是通过一个队列机制实现state更新的。执行setState时，会将需要更新的state合并后放入状态队列，而不会立刻更新state，队列机制可以批量更新state。如果不通过setState而直接修改this.state，那么这个state不会放入状态队列中，下次调用setState时，状态队列新进行合并时，会忽略之前直接被修改的state，这样我们就无法合并了，而且实际也没有把你想要的state更新上去。

React.setState中的同步更新

当然了，我们也是有办法同步获取state更新后的值：

1. setTimeout等异步操作中调用setState函数
2. DOM原生事件
3. 利用setState回调函数
4. 函数式setState用法

前两个都是比较好理解，因为没有前置的batchdUpdate调用，所以isBatchingUpdates为false。不会开启批量更新模式。

后面两个方法，是React本身提供的。要注意的是，setState回调函数要在render函数被重新执行后才执行。

// 回调函数
this.setState({ count: 1 }, () => {
    console.log(this.state.count)
})

// 函数式
this.setState(prevState => {
    return {
        count: prevState.count + 1
    }
})

对比VUE批量更新

Vue在监听到数据变化后，会开启一个队列，并缓冲在同一事件循环中发生的所有数据变更（如果同一个watcher被多次触发，只会被推入到队列中一次）。然后，在下一次事件循环Tick／微任务中，Vue刷新队列执行实际工作。

vue批量更新体现为：

1. Mutation Observer（变动观察器）是侦听DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。
2. 概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质区别：事件是同步触发，DOM发生变化会立刻出发响应的事件。
3. Mutation Observer是异步触发，DOM发生变动，并不会立刻触发，而是要等到当前所有DOM操作都结束后才会触发。

针对以上的知识点，我们来看看下面这段代码，看我们是否理解setState：

class Demo extends React.Component {
  state = {
    count: 0,
  };
  componentDidMount() {
    this.setState({
      count: this.state.count + 1,
    });
    console.log("console: " + this.state.count);

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

    this.setState(
      (prevState) => {
        console.log("console from func: " + prevState.count);
        return {
          count: prevState.count + 1,
        };
      },
      () => {
        console.log("last console: " + this.state.count);
      }
    );
  }

  render() {
    console.log("render: " + this.state.count);
    return <h4>test</h4>;
  }
}

总结

1. state更新需要通过setState，而不能直接操作state。
2. 调用setState更新，state不会立刻生效。
3. 多个顺序执行的setState不是同步一个个执行，会加入到一个队列中，然后最后一起执行，及批量更新。