React组件状态保留规则疑问：为何不同条件渲染写法会导致状态重置？

嘿，这个问题确实戳中了React状态管理里一个很容易混淆的细节，我当初刚深入理解React的时候也纠结过这个点！

先把React的核心规则再明确一遍：React判断是否保留组件状态，从来不是看组件实例是不是“新创建”的，而是看两个关键：组件的类型（比如都是<Counter>），以及它在DOM树中的位置（也就是渲染层级里的位置）。

咱们拆解两种写法的区别：

第一种写法：三元运算符渲染单个组件 #

{isFancy ? (
  <Counter isFancy={true} />
) : (
  <Counter isFancy={false} />
)}

这种写法里，不管isFancy是true还是false，在JSX结构中，这个位置始终只会存在一个<Counter>组件——只是它的isFancy props在变化。React会识别出：这是同一个位置的同一个类型组件，所以它不会执行“卸载旧组件+挂载新组件”的操作，只会更新现有组件的props，组件内部的状态自然就保留下来了。

第二种写法：两个独立的条件渲染 #

{isFancy && <Counter isFancy={true} />}
{!isFancy && <Counter isFancy={false} />}

这里的逻辑就完全不同了！当你切换isFancy的状态时：

• 从true变false：第一个条件表达式会从渲染<Counter>变为不渲染任何内容，React会卸载这个位置的<Counter>组件，它的状态也就被清除了；
• 同时，第二个条件表达式从不渲染变为渲染<Counter>，React会在另一个全新的位置挂载一个新的<Counter>组件，这个新组件会使用初始状态（也就是你看到的0）。

对React来说，这两个<Counter>处于DOM树里的不同位置，哪怕它们是同一个组件类型，也会被当成两个完全独立的组件实例来处理——卸载旧的、挂载新的，状态自然就重置了。

你后面提到的思考特别到位：每次组件重渲染时，JSX里的<Counter>确实是新创建的对象，但React根本不关心这个！它的状态保留逻辑只认“组件类型+位置”，和JSX对象是不是新的没有关系。比如你写<Counter isFancy={isFancy} />，每次重渲染都会生成新的JSX对象，但因为位置始终不变，React就会认为这是同一个组件，状态也会保留。

备注：内容来源于stack exchange，提问作者Stefanie Gauss