React孙组件条件渲染时重复挂载的原因及解决方案

问题原因 #

当你在Child组件中使用{count % 2 === 0 && children}的条件渲染逻辑时：

• 当count为奇数，条件不成立，React会直接卸载children对应的DOM节点及Grandchild组件实例
• 当count变回偶数，条件重新成立，React会重新创建Grandchild的组件实例并挂载——这是因为React判断组件是否复用的核心依据是组件类型+唯一key，这里条件切换时，被移除的组件没有留下稳定的标识，React会将再次渲染的Grandchild判定为全新组件，从而触发完整的挂载流程。

解决方法 #

方式一：用隐藏替代卸载 #

不要直接通过条件渲染移除组件，而是通过CSS控制显示/隐藏，让组件始终保留在DOM树中：

// Child组件中修改渲染逻辑
<div style={{ display: count % 2 === 0 ? 'block' : 'none' }}>
  {children}
</div>

这种方式下Grandchild只会在父组件挂载时挂载一次，后续只是切换显示状态，不会触发卸载和重新挂载。

方式二：添加稳定的key标识 #

如果必须使用条件渲染，可以给传递的Grandchild组件添加固定不变的key：

// App组件中修改传递逻辑
<Child>
  <Grandchild key="fixed-grandchild-key" />
</Child>

通过固定key，React会识别出条件切换前后的Grandchild是同一个组件实例，即使中间被移除，再次渲染时也会复用之前的实例，避免重新挂载。不过这种方式的优先级低于第一种，因为频繁的挂载/卸载本身就不如单纯的显示切换高效。

内容的提问来源于stack exchange，提问作者Viran Malaka