React--diff算法和三种优化策略
- 参考文章
- https://www.jianshu.com/p/ca44182828ae
- https://www.jianshu.com/p/3ba0822018cf
简介
react为追求性能的极致，采用了虚拟dom，本身是一个js对象。创建一个对象的开销比创建一个dom节点的开销小很多。当然，虚拟dom最终要转化为真实dom。react中，将虚拟dom树转换成真实dom树的最少操作的过程 称为 调和 ，diff算法是调和的具体实现。针对不同情况，diff算法有三种优化策略。
树的优化策略（tree diff）
核心点
- 层级控制，diff在树这一层仅仅比较当前同一层次节点。
- 暴力删除，如果同层次比较的某个节点不存在，或者说整个树结构发生了大的变化，那该节点及其子节点都将被直接销毁
- 跨层级比较会进行相应的创建节点和删除节点的操作。
组件的优化策略（component diff）
关注点
- 是否同一类型，是则采用原策略比较，tree diff
- 不是同一类型，将该组件判断为 dirty component，从而替换整个组件下的所有子节点。
- 对于同一类型的组件，有可能其 结构 没有任何变化，比如只是内容发生了改变，此时可以使用shouldComponentUpdate()return false,手动终止diff算法,加快渲染速度
元素的优化策略（element diff）
关注点
-
INSERT_MARKUP（插入）
- 全新的节点，需要执行插入操作。
-
MOVE_EXISTING（移动）
- 节点本身存在，只是位置不在目标位置，需进行移动操作
-
REMOVE_NODE（删除）
- 结构相同内容不同，无法直接复用，需要删除重建
-
基于唯一标识key进行运算，快速定位
