使用不同渲染函数仍引用旧Component？React渲染异常排查

问题描述 #

我有一个组件，会根据当前的stage值渲染不同子组件：stage=1时调用renderOne，其他值调用对应渲染函数。两个渲染函数包含相似的组件：

renderOne(){
  return (
    <Fragment>
      <h3>One</h3>
      <Tab id="one" values={...} />
    </Fragment>
  );
}

renderTwo(){
  return (
    <Fragment>
      <h3>Two</h3>
      <Tab id="two" values={...} />
    </Fragment>
  );
}

此时Tab始终显示首次挂载的实例：比如初始stage=2，切换到stage=1后，渲染的仍是renderTwo里的Tab。但把renderOne改成用div包裹就正常了：

renderOne(){
  return (
    <div>
      <h3>One</h3>
      <Tab id="one" values={...} />
    </div>
  );
}

请问这是什么原因？是否是React的性能优化行为？（React版本18）

原因分析 #

这是React Diff算法的特性，属于React优化DOM操作的常规行为，不是Bug。

1. Fragment的“无实体”特性导致组件复用 #

<Fragment>（或简写<>）不会生成真实DOM节点，它的子元素会直接“平铺”到父组件的DOM层级中。切换stage时，父组件的虚拟DOM子元素序列是：

• 初始（stage=2）：[<h3>Two</h3>, <Tab id="two" />]
• 切换后（stage=1）：[<h3>One</h3>, <Tab id="one" />]

React会按顺序对比这两个序列：

• 第一个元素都是<h3>，所以复用现有实例，只更新文本内容
• 第二个元素都是<Tab>，所以复用现有<Tab>实例，仅更新id等props

如果你的<Tab>组件内部状态是仅在挂载时初始化（比如类组件的constructor、函数组件的useEffect(() => {}, [])），且没有监听id等props变化来同步更新状态，那么即使props变了，组件内部还是保留首次挂载的旧状态，看起来就像是“旧实例”在渲染。

2. div作为实体容器触发组件卸载重挂载 #

换成<div>包裹后，父组件每次返回的是一个独立的<div>节点。此时React会先卸载旧的<div>及其内部所有组件，再挂载新的<div>及其内部组件——因为<div>是真实DOM节点，React会认为这是需要完全替换的内容（未指定key时，会通过元素位置和类型判断）。

这样<Tab>会被彻底卸载后重新挂载，内部状态会基于新的id重新初始化，自然能正确显示对应内容。

3. 本质：React的元素复用规则 #

React复用组件实例的核心判断标准是：

• 元素类型是否一致（比如都是<Tab>）
• 元素的key属性是否匹配（如果有指定）

用Fragment时，<Tab>在虚拟DOM中的位置和类型都没变化，因此被复用；用div时，<Tab>所在的父容器被重新挂载，导致<Tab>也被重新创建。

这确实是React的性能优化行为：通过复用相同类型的组件实例，避免不必要的DOM卸载和挂载，减少性能开销。

内容的提问来源于stack exchange，提问作者Julián McClinton