ReactNative进阶（四）：ReactNative 原理剖析之JS 层渲染 diff 算法_react native匹配dom节点

本文链接：https://blog.csdn.net/2401_84411323/article/details/138296334

整个 diff 算法，都是基于 Virtual Dom 的，那什么是 Virtual Dom 呢？

Virtual Dom 本质是用来模拟 DOM 的 JS 对象。一般含有标签名（tag）、属性（props）和子元素对象（children）三个属性，不同框架对属性的命名会有点差别，但表达的意思是一致的。

例如：对于以下一段代码，怎么映射成对应的 Virtual Dom 呢？

<A>
  Hello World
  <B>
    <C key="key-C" style={{ width: 100 }} />
    <D key="key-D" style={{ color: 'red' }} />
  </B>
</A>

在该例中，按三个属性分析如下：

A、B、C、D是标签（tag）
key、style是属性（props）
节点B是节点A的子元素对象（children）
节点C和D是节点B的子元素对象（children）
最后，映射出来的 js 对象（Virtual Dom）如下：

三、React Diff 算法的两个假设

为什么 React Diff 算法相对于传统的 diff 算法，复杂度从 O(n^3)降到 O(n)？
React基于以下的两个假设，减少了不必要的计算。

1.两个相同组件将会生成相似的DOM结构，两个不同组件将会生成不同的DOM结构。
2.对于同一层次的一组子节点，它们可以通过唯一的id进行区分。

对于假设 1: 两个相同组件，一般指的是相同的类，包含 React 官方定义的组件（View，Text）和程序员自定义的组件（这也是React 组件化开发的一个原因，可以提升 diff 算法的效率）；
对于假设 2: 一般指的是使用map遍历生成的列表视图或者使用ListView/FlatList等列表组件；

React Diff 算法的实现，几乎都是基于以上两个假设进行优化的,接下来来看看 React Diff 算法的具体实现原理。

四、React Diff 算法实现

基于以上的两个假设，React Diff 算法的实现，主要可以分相同类型节点的比较、不同节点类型的比较、列表节点的比较三类情况，这里也主要针对这三类情况进行分析。

4.1 相同类型节点的比较

修改节点 A 的属性 style
在这里插入图片描述

依据假设 1 的前半句：两个相同组件将会生成相似的 DOM 结构，由于新旧节点类型相同（tag 都是 A），DOM 结构没有发生变化，React 仅对属性（style）进行重设(将 styleBefore 改成将 styleAfter)从而实现节点的转换和界面的更新

这种情况，通过这类diff算法计算后，会调用 Native的 updateView 来刷新界面。

4.2 不同节点类型的比较

将节点 A 及其子节点（红色标签部分）改成节点 D 的子节点。

为了方便分析，首先抽象成 DOM tree 节点模型。

依据假设假设 1 的后半句：两个不同组件将会生成不同的 DOM 结构，当发现节点已经不存在，则该节点及其子节点会被完全删除掉，不会用于进一步的比较，因此，React 会直接删除前面的节点，然后创建并插入新的节点。

在该例子中，会直接先移除根结点的左子树（即先移除节点 A 及其子节点 B 和 C），然后再重新创建节点 A 及其子节点 B 和 C 作为根结点的右子树。

这种情况，通过这类diff算法计算后，会调用 Native的 manageChildren 来刷新界面。

4.3 列表节点的比较

在渲染列表节点时，它们一般都有相同的结构，只是内容有些不同而已，常见的，如使用map遍历生成的列表视图或者ListView/FlatList等列表组件，如果开发的时候没有写 key，编译器会给出警告提示（因为是否添加 key，对应的 diff 算法差别很大，程序性能也会差别很大）

依据假设 2：对于同一层次的一组子节点，它们可以通过唯一的 key 进行区分，通过给每个节点添加唯一的 key，可以极大的简化 diff 算法，减少对 DOM 的操作。列表节点的比较主要有添加节点、删除节点、节点排序三种场景，js层diff算法计算后，会调用 Native的 manageChildren 来刷新界面。

4.3.1 添加节点

在节点 B 与 C 之间插入节点 F。

在方案一中，没有添加唯一的稳定的 key，无法定位到具体修改的位置，只能依次比较前后两个状态（即 A、B、C、D、E 和 A、B、F、C、D、E）,当比较到第三个时，发现 C 与 F 不相同，记录下来，往后依次比较，D 与 C，E 与 D，均不相同，也记录下来，最后加上新状态新增的一个 E 节点，一共需要对 DOM 进行 4 次操作。

在方案二中，如果添加了唯一稳定的 key，则可以直接找到插入的位置，对 DOM 进行 1 次插入操作即可。

综上，可以发现，列表添加节点时，有唯一的稳定的 key，可以减少对 DOM 的操作，从而提升程序性能。