setState 函数做了哪些事情
setState 的批量更新机制
批量更新机制是 React
中用来优化状态更新和组件重新渲染的重要机制。
当调用 setState
更新组件的状态时,React
不会立即进行状态的更新和组件的重新渲染。相反,它会将连续的 setState
调用合并为单一的更新操作。具体来说,当 React
接收到多个 setState
调用时,它会将这些更新操作放入队列中,然后在事件循环中进行批量处理。
这种批量更新机制的作用在于减少不必要的重新渲染次数,提高性能。因为多次连续的状态更新会合并成一次更新,只有最终的状态会触发组件的重新渲染,从而避免了多次重复的渲染过程。
另外,在 React
中,批量更新机制也在事件处理程序和生命周期方法中发挥作用。例如,在点击按钮后连续调用了多次 setState
来更新组件状态,React
会将这些状态更新合并为一次更新,然后进行一次组件的重新渲染,从而优化了用户交互和渲染性能。
总的来说,批量更新机制是 React
中重要的性能优化手段,它通过合并连续状态更新来减少不必要的重新渲染,提高了组件的效率和性能。
setState 函数做了哪些事情
- 代码中调用
setState
函数之后,React
会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation
)。 - 经过调和过程,
React
会以相对高效的方式根据新的状态构建React
元素树并且着手重新渲染整个UI
界面; - 在
React
得到元素树之后,React
会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染; - 在差异计算算法中,
React
能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。