React不同条件渲染方式下组件状态保留的疑问

核心原因是React判断组件是否为同一个实例，看的是它在父组件JSX子元素序列中的逻辑位置+组件类型，而不是最终渲染到DOM里的物理位置。

先拆解两种写法的差异：

挑战中的if分支写法 #

<div>
  {showHint ? (
    <>
      <p>提示文本</p>
      <Form />
    </>
  ) : (
    <Form />
  )}
</div>

• 当showHint=true时，父div的直接子元素是一个Fragment，Fragment里的子元素是<p>和<Form>，此时<Form>是Fragment的第二个子元素；
• 当showHint=false时，父div的直接子元素就是<Form>，此时<Form>是div的第一个直接子元素。

React会把这两种场景下的<Form>判定为不同位置的组件实例，所以切换时会卸载旧的<Form>、重新挂载新的，自然就重置了状态。

解决方案的&&条件渲染写法 #

<div>
  {showHint && <p>提示文本</p>}
  <Form />
</div>

这里的<Form>在JSX的逻辑结构里，始终是父div的第二个子元素位置：

• 当showHint=true时，第一个位置渲染<p>，第二个位置渲染<Form>；
• 当showHint=false时，第一个位置的表达式返回null，React会跳过这个位置的渲染，但<Form>的逻辑位置还是第二个，没有变。

React识别到这是同一个位置的同一个组件类型，所以不会卸载重建，状态也就保留下来了。

你猜的“插入空元素”不对——&&条件不满足时返回的是null，React不会把它渲染成任何DOM元素，但这个逻辑位置的“占位”作用是存在的，确保<Form>的位置在JSX结构里始终固定，这才是状态保留的关键。

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