React--diff算法的三种优化策略

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

React Diff算法的优化

1. 同层节点之间相互比较，不会跨节点比较(tree diff)；

2. 开发中，可以通过key来指定哪些节点在不同的渲染下保持稳定(element diff）；

3. 不同类型的节点，产生不同的树结构(component diff)；

树的优化策略（tree diff）

两个虚拟 DOM 进行比对时，从上往下进行比对，如果同一层比对存在差异时就不会继续进行比对

元素的优化策略（element diff）

引入 key 值提高比对性能，其中 key 值最好不要为 index，应该是固定、唯一的值，比如 item、id 等

组件的优化策略（component diff）

Diff 算法默认同层存在差异时就不会继续进行比对，而是替换整个差异部分，如果子组件数据改变同样也会被替换掉，可以借助 shouldComponentUpdate 避免频繁更新

参考：

https://www.cnblogs.com/bpone/p/14900203.html

苟有恒 , 何必三更眠五更起