Diff 的瓶颈以及 React 的应对
由于 diff
操作本身会带来性能上的损耗,在 React
中提到过,即使最先进的算法中,将前后两棵树完全比对的算法复杂度为O(n3)
,其中 n
为树中元素的数量。
如果 React
使用了该算法,那么仅仅一千个元素的页面所需要执行的计算量就是十亿的量级,这无疑是无法接受的。
为了降低算法的复杂度,React
的 diff
会预设三个限制:
- 只对同级元素进行
diff
比对。如果一个元素节点在前后两次更新中跨越了层级,那么React
不会尝试复用它 - 两个不同类型的元素会产生出不同的树。如果元素由
div
变成p
,React
会销毁div
及其子孙节点,并新建p
及其子孙节点 - 开发者可以通过
key
来暗示哪些子元素在不同的渲染下能保持稳定