首页 > 代码库 > ReactiveNative学习之Diff算法

ReactiveNative学习之Diff算法

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 的渲染性能。

?

ReactiveNative学习之Diff算法