React渲染过程
我们都知道使用React可以使得网页的性能有很大的提高,本文具体探究它是通过什么样的渲染机制做到的。
在页面一开始打开的时候,React会调用render函数构建当前页面的一棵Dom树,在state/props发生改变的时候,render函数会被再次调用渲染出另外一棵树,接着,React会用对两棵树进行对比,找到需要更新的地方批量改动
Diff 算法
这个过程中,比较两棵Dom tree高效找出需要更新的地方是很重要的。React基于两个假设:
-
两个相同的节点(element)产生类似的DOM结构,不同节点(element)产生不同的DOM结构
-
对于同一层次的一组子节点,它们可以通过唯一的key进行区分
发明了一种叫Diff的算法,它极大的优化了这个比较的过程,将算法复杂度从O(n^3)降低到O(n)。
同时,基于第一点假设,我们可以推论出,Diff算法只会对同层的节点进行比较。
也就是说如果父节点不同,React将不会在去对比子节点,直接卸载或删除当前结点和其的直接点,然后重新构建。
下面,我们具体看下Diff算法是怎么做的,这里分为五种情况考虑
- 不同的节点类型
- 相同节点类型当中的DOM节点
- 相同类型当中的组件节点
- DOM节点的递归children
- 列表比较
不同的节点类型
当前遍历到的两个节点(一个是old tree, 一个是new tree)类型不同的时候,React将会卸载,该节点及节点下面的子节点所构成的树,重新构建一个新的tree。
如果当前是old tree的DOM节点,那么DOM节点会被直接destroy,。如果有children节点,那么children的destroy方式根据节点类型的不同而不同(DOM节点或者是Component)。
如果当前是old tree的Component节点,那么该Component会被卸载,执行componentWillUnmount这个方法,并且state会被丢失。构建Component的时候,是依次执行componentWillMount 、componentDidMount。 如果有children节点,那么children的destroy方式根据节点类型的不同而不同(DOM节点或者是Component)。
相同节点类型当中的DOM节点
如果两个类型相同的DOM节点,React根据attributes的不同然后去更新相应的属性或者其attributes的值
相同类型当中的组件节点
当一个组件更新的时候,由于组件保持不变,所以state不会丢失,React会一次执行componentWillReceiveProps和componentWillUpdate,然后render方法会被调用并且diff算法会对前一个结果后新的结果进行递归
DOM节点的递归children
需要注意的是对于同一个节点下面的同一层的子节点,需要保证key的唯一
列表比较
<div>
<A />
<B />
</div>
// 列表一到列表二
<div>
<A />
<C />
<B />
</div>
从列表一到列表二,只是在中间插入了一个C,但是如果没有key的时候,react会把B删去,新建一个C放在B的位置,然后重新建一个节点B放在尾部。
从列表一到列表二的生命周期如下
列表一:
A is created
A render
B is created
B render
A componentDidMount
B componentDidMount
列表二:
A render
B componentWillUnmount
C is created
C render
B is created
B render
A componentDidUpdate
C componentDidMount
B componentDidMount
当节点很多的时候,这样做是非常低效的,所以我们需要给每个节点配一个key,让react可以识别出来哪些节点是一样的,不需要重新创建。
配上key之后,在跑一遍代码看看
A render
C is created
C render
B render
A componentDidUpdate
C componentDidMount
B componentDidUpdate
果然,配上key之后,列表二的生命周期就如我所愿,只在指定的位置创建C节点插入。
这里要注意的一点是,key值必须是稳定(所以我们不能用Math.random()去创建key),可预测,并且唯一的。