React元素更新原理及示例疑问：为何元素未被删除而是替换？

先看你给出的示例代码：

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

针对你提出的「React怎么知晓要替换元素而非创建新元素」的疑问，核心原因在于React的虚拟DOM和diffing差异对比机制：

虚拟DOM与差异对比 #

每次调用ReactDOM.render()时，React会生成一份新的虚拟DOM树（对应你每次tick函数里创建的element）。随后它会把这份新虚拟树和上一次渲染留存的旧虚拟树做对比，精准找出两者间的差异：

• 你的示例里，<h1>的内容固定不变，对比后React会判定这个节点无需更新，直接复用现有DOM；
• 而<h2>里的时间文本每次都不同，React只会针对性更新这个节点的文本内容，不会重新创建整个<div>或<h1>节点。

节点复用的判断逻辑 #

React判断是否复用现有DOM节点的核心规则：

• 先看元素类型：如果新旧元素的类型一致（比如都是<div>、<h1>），React会优先复用现有DOM节点，仅更新节点的属性或子元素中变化的部分；
• 只有当元素类型不同时，React才会删除旧节点并创建新节点。你的示例中每次渲染的根元素都是<div>，所以React会复用这个根节点，再处理其内部子元素的变化。

关于「替换」的误解 #

你感觉是渲染了新元素，但实际上React并没有删除整个旧DOM树重建，只是做了最小化的局部更新——仅修改<h2>的文本内容。这种设计是React性能优化的核心，因为真实DOM的修改代价远高于虚拟DOM的对比计算。

内容的提问来源于stack exchange，提问作者Leslie Jiang