深入理解 React JS 中的 setState
此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用。
在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 setState 的表现好像有点怪异,和理解中的 state 更新机制不太一样,下面我们就来简单探讨下 setState 背后的机制。
课程中的其他常见小问题请常见 React.js 开发参见问题 Q&A。
1 setState 问题的复现
我们看下面一段简单的代码,代码通过点击一个按钮,改变 state 中的 clicked 值。在修改值后进行 clicked 值的输出,你尝试猜测一下输出的值是什么?
许多同学在自己写代码遇到类似逻辑的时候都会发现,console.log(this.state.clicked);
这段代码输出的不是我们预期的 true,而是 false。
这是为什么呢?
2 setState 的内部机制
遇到问题我们还是去官方文档找线索。
我们看到 state 的章节有下面这段话。
文章链接在这里:https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous。
我们会发现其实 React 的 setState 方法是一个异步的方法,React 会将所有的 setState 方法打包成一次进行更新,类似于快递点寄快递,囤积了一些包裹后一次投递,而不是你每次修改 state 都会进行更新。
这样的设计主要是为了提高 UI 更新的性能,我们知道 React 中 state 的改变会导致 UI 的更新。
如果需要进行同步操作逻辑,那么在回调函数里添加逻辑即可。
{% codeblock lang:js%}
handleClick = () => {
this.setState({
clicked: true
}, () => console.log(this.state.clicked)) //这时候输出的是 true
}
{% endcodeblock %}
3 state 的更新时机
任何 state 的更新都会导致 React 进行重新渲染。props
也会导致 React 进行重新渲染。组件与父组件的更改同样也会引起 React 的重新渲染。
那么我们有没有办法手动控制 React 是否进行渲染呢?
这里,你应该想起来生命周期函数里有一个方法 shouldComponentUpdate
。
shouldComponentUpdate 方法官方文档。
此方法默认每次在需要进行重新渲染时返回 true,但是在这个函数里你可以添加自己的逻辑,控制 React 不进行渲染以及渲染的条件。
那么,同样,我们也可以在此函数中定义那些我们关注的 state ,只有当它们变化才让 React 进行重新渲染,而其他一些不相关的 state 的值即使变化了,我们也可以让 React 不进行渲染。
理解了这些,那么在你进行相关性能优化时就非常有用。