React 的 diff 策略是啥？

杨进军2025-06-22 10:48

先说结论，不同标签，推倒重建，相同标签，修改属性。

具体看下面的 demo。

1、不同标签，删除 div 节点，新建 span 节点。

html 复制代码

<!-- 更新前 -->
<div>jingdong</div>

<!-- 更新后 -->
<span>jingdong</span>

2、相同标签，把 className 修改为 cls2。

html 复制代码

<!-- 更新前 -->
<div className="cls1">jingdong</div>

<!-- 更新后 -->
<div className="cls2">jingdong</div>

3、直接新增 huawei 节点即可。

html 复制代码

<!-- 更新前 -->
<ul>
    <li>jingdong</li>
    <li>tengxun</li>
</ul>

<!-- 更新后 -->
<ul>
    <li>jingdong</li>
    <li>tengxun</li>
    <li>huawei</li>
</ul>

4、key 不同，即使相同标签，也推倒重建。

优先比较 key。

html 复制代码

<!-- 更新前 -->
<div key="jd">jingdong</div>

<!-- 更新后 -->
<div key="jingdong">jingdong</div>

5、两次修改，一次新增

注意：没有 key 属性，对比下一个 demo。

html 复制代码

<!-- 更新前 -->
<ul>
    <li>jingdong</li>
    <li>tengxun</li>
</ul>

<!-- 更新后 -->
<ul>
    <li>huawei</li>
    <li>jingdong</li>
    <li>tengxun</li>
</ul>

将 jingdong 节点修改为 huawei 节点
将 tengxun 节点修改为 jingdong 节点
新增 tengxun 节点

6、两次移动（性能更好），一次新增

注意：有 key 了。

html 复制代码

<!-- 更新前 -->
<ul>
    <li key="jd">jingdong</li>
    <li key="tx">tengxun</li>
</ul>

<!-- 更新后 -->
<ul>
    <li key="hw">huawei</li>
    <li key="jd">jingdong</li>
    <li key="tx">tengxun</li>
</ul>

新增 huawei 节点
移动 jingdong 节点到第二位
移动 tengxun 节点到第三位

遇知如何移动，请看下回。