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不是同步一个个执行，会退出到一个队列中，而后最初一起执行，及批量更新。