React中两种Counter渲染写法为何状态重置行为不同？

核心原因在于React判断组件实例是否复用的逻辑：React会依据组件在UI树中的位置、类型以及key属性来识别同一个组件实例。

第一种写法（三元运算符）不重置状态的原因 #

假设你的第一种写法是这样的：

{isPlayerA ? <Counter /> : <Counter />}

在React的UI树结构里，这个条件渲染的位置始终对应同一个节点位置——不管isPlayerA是true还是false，都是在这个固定位置渲染同类型的Counter组件。React会判定这是同一个组件实例，因此会复用原实例，组件的状态也会被保留。你觉得“渲染位置相同”的判断是准确的，这种场景下确实是同一个位置，所以状态不会重置。

第二种写法重置状态的原因 #

如果你的第二种写法是类似这样的两个独立条件分支：

{isPlayerA && <Counter />}
{!isPlayerA && <Counter />}

这种写法在UI树里对应两个不同的节点位置：第一个Counter属于第一个条件分支的位置，第二个属于第二个分支的位置。当isPlayerA状态切换时，React会先卸载前一个位置的Counter实例，再在另一个位置挂载全新的Counter实例——新实例的状态是初始状态，所以看起来像是“重置”了。

另一种可能的第二种写法是给Counter添加了不同的key：

{isPlayerA ? <Counter key="playerA" /> : <Counter key="playerB" />}

这种情况即使是同一个位置，但因为key不同，React会将它们判定为两个完全不同的组件实例。切换时同样会销毁旧实例、创建新实例，导致状态重置。

关于“UI树中是否存在两个Counter组件”的问题 #

不管是哪种第二种写法，同一时间UI树里只会存在一个Counter组件：

• 对于两个独立条件分支的写法，某一时刻只有一个条件成立，只会渲染一个Counter，但切换时会在不同位置销毁和重建实例；
• 对于带不同key的三元写法，同一时刻也只会渲染一个Counter，但React会把不同key的组件视为不同实例，所以切换时会重置状态。

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