setState

setState

• 简单栗子

this.state = {
  count: 0，
}

incrementCount() {
  this.setState({
    count: this.state.count + 1,
  });
}

handleIncrement = () => {
 this.incrementCount();
 this.incrementCount();
 this.incrementCount();
}

// count 并不会只并不会变成3，而是1

• 纠正

incrementCount() {
  this.setState((prevState) => {
    return {count: prevState.count + 1}
  });
}

setState认知

• 1.setState 不会立刻改变React组件中state的值.
• 2.setState 通过触发一次组件的更新来引发重绘.
• 3.多次 setState 函数调用产生的效果会合并。

重绘指的就是引起 React 的更新生命周期函数4个函数：

• shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
• componentWillUpdate（被调用时this.state没有更新）
• render（被调用时this.state得到更新）
• componentDidUpdate

如果每一次 setState 调用都走一圈生命周期，光是想一想也会觉得会带来性能的问题，其实这四个函数都是纯函数，性能应该还好，但是render函数返回的结果会拿去做Virtual DOM比较和更新DOM树，这个就比较费时间。
目前React会将setState的效果放在队列中，积攒着一次引发更新过程。
为的就是把 Virtual DOM 和 DOM 树操作降到最小，用于提高性能。

setState执行同步更新?

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用 setState 不会同步更新 this.state，除此之外的setState调用会同步执行this.state。

所谓“除此之外”，指的是绕过React通过 addEventListener 直接添加的事件处理函数，还有通过setTimeout || setInterval 产生的异步调用。
简单一点说， 就是经过React 处理的事件是不会同步更新 this.state的. 通过 addEventListener || setTimeout/setInterval 的方式处理的则会同步更新。

setState使用方式

• setState([object],[function]) 第一个参数对象，第二个参数函数，该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成。
• setState([function]) 接收一个函数。这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：