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 做为第二个参数: