性能调优
子级校正过程的工作原理(Reconciliation
)
当你改变React组件状态是,它会触发组件的重绘过程。React会构建一个新的虚拟DOM来呈现应用UI的状态,然后检测和当前的虚拟DOM之间的差异,从而计算出哪些DOM元素需要进行更新、添加或者删除,这个过程被称为“子级校正”
批处理
- 在React中,在任何时刻调用组件的
setState
方法,React
不会立即对其更新,而是只会将其标记为“脏”状态 - 组件状态的变更不会立刻生效,
React
使用了事件轮询对变更内容进行批量绘制 - 事件轮询是一个
JavaScript
机制,它会持续运行,不断地进行数据分发,检测所有需要被触发的事件处理程序和生命周期方法。通过对子级校正过程进行批处理,在每个事件轮询中,DOM节点只会进行一次更新。
子树渲染
- 当事件轮询结束后,React会将“脏”组件及其子节点进行重绘。所有后代节点的
render
方法都会被调用,将脏组件DOM树在虚拟DOM中进行重绘。 - 对子树渲染还能进行优化,使用
shouldComponentUpdate
的生命周期方法。在子组件重绘之前,React都会调用它的shouldComponentUpdate
方法,默认情况下,该方法始终返回true
,不过如果你自己实现了该方法并返回false
,React就会跳过该组件及其子组件的重绘过程