反应差异算法

生成将一个树转换为另一个树的最小操作数具有 O（n ^ 3）的复杂度，其中 n 是树中的节点数。React 依赖于两个假设来在线性时间内解决这个问题 - O(n)

1. 同一类的两个组件将生成类似的树，不同类的 tw 组件将生成不同的树。

2. 可以为在不同渲染中稳定的元素提供唯一键。

为了确定两个节点是否不同，React 区分 3 个案例

1. 如果它们具有不同的类型，则两个节点是不同的。

• 例如，<div>...</div> 与 <span>...</span> 不同

2. 每当两个节点具有不同的密钥时

• 例如，<div key="1">...</div> 与 <div key="2">...</div> 不同

此外，如果你想要优化性能，以下内容至关重要且非常重要

如果它们[两个节点]的类型不同，React 甚至不会尝试匹配它们渲染的内容。它只是从 DOM 中删除第一个并插入第二个。

这就是原因

元素不太可能生成一个看起来像生成的 DOM。React 不是花时间尝试匹配这两个结构，而是从头开始重新构建树。