React diff算法如何找出这个假设？

Question

我正在使用 React 构建我自己的 Web 应用程序，但我想知道以下假设如何使 React diff 更快。换句话说，这个假设是基于什么做出反应的？

Two elements of different types will produce different trees.

Answer 1

React 创建并保留与实际 DOM 完全相同的副本，称为虚拟 DOM。这将拥有实际 DOM 所拥有的一切，例如对象及其类型和值。每当实际 DOM 有任何变化时，React 在更新之前对其进行快照并将其与虚拟 DOM 进行比较，并根据发现的差异更新实际 DOM.

所以如果你有两个不同类型的元素，就会有不同的树。

这是我的理解，如果您有其他发现，请告诉我。

Answer 2

该假设使 React 能够在 O(n) 时间内找出将一棵 DOM 树转换为另一棵树的最少操作数。

However, the state of the art algorithms have a complexity in the order of O(n3) where n is the number of elements in the tree. If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive.

通过假设不同类型的元素有不同的树，React 将通过避免太多的比较来将一棵树转换为另一棵树，从而节省宝贵的计算时间。所以没有这个如果你有以下结构

<div>
    <span> </span>
    <span> </span>
</div>

如果您的新结构是

<span>
    <span> </span>
    <div> </div>
</span>

React 现在必须比较第一个跨度 child 是否存在。然后它必须比较第二个 child div 是否存在；现在它发现它不存在，所以它只需要更改第二个 div 以及外部 parent 标签。（想象一下对 1000 个元素执行此操作）

他们也提到了

In practice, these assumptions are valid for almost all practical use cases.

根据我在几乎所有情况下的经验，它总是正确的。

React diff算法如何找出这个假设？

how does react diff algorithm find out this assumption?

diff

web

reactjs