你真的会用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不是同步一个个执行，会加入到一个队列中，而后最后一块儿执行，及批量更新。