react16
以前的diff算法
虚拟dom
树是一个tree
结构,每一个DOM
节点是一个对象,存储对应的虚拟DOM
信息,更新时通过树的遍历实现DOM
树的更新。
tree
比较
通过遍历更新前后树的结构进行比较,若更新前后相同深度的节点结构不同,则删掉更新前的节点并停止当前节点的更深层次比较
component
比较
react
假设不同的component
具有不同的结构,若component
不同则删除原节点并停止更深层次的比较,然后创建新的节点。
数组元素比较
数组元素默认通过key
进行比较,若不存在key
则采用index
进行比较,为提高性能建议给数组元素key
赋值
- 插入:直接插入
- 删除:直接删除
- 移动:当旧列表中的元素所在位置小于在新列表中元素位置时才会移动元素位置,且把上一次在旧列表中查找到元素位置设置为下一次查找的起始位置
待做
react16
之后的版本把虚拟DOM
改为链表结构,使用Fiber
进行比较,其比较算法实现