ReactiveNative学习之Diff算法

Posted 2020-08-27

React 源码剖析系列 － 不可思议的 react diff
深入浅出React（四）：虚拟DOM Diff算法解析
React diff 算法
总结链接引用的文章
React出于性能的考虑，为了避免频繁操作DOM，采用了虚拟DOM结构（virtual DOM）：
每当虚拟DOM树发生变化树发生变化时，React会将当前DOM树和之前的虚拟DOM树进行diff算法对比，得到虚拟DOM结构的区别，然后仅仅渲染差异部分。
ReactiveNative官方称，不同类型的 component 是很少存在相似 DOM tree 的机会，因此这种极端因素很难在实现开发过程中造成重大影响的。

• 类型仙相同的节点总是生成同样的树，而类型不同的节点也总是生成不同的树。
• 可以为多次render都表现稳定的节点设置key。

基于上述两点，制定以下diff策略：

diff 策略

• 1.Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
• 2.拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
• 3.对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

算法优化

基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。
React 通过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；

• React 通过分层求异的策略，对 tree diff 进行算法优化；
• React 通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对 component diff 进行算法优化；
• React 通过设置唯一 key的策略，对 element diff 进行算法优化；

开发建议

建议，在开发组件时，保持稳定的 DOM 结构会有助于性能的提升；
建议，在开发过程中，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响 React 的渲染性能。

?