React条件渲染中避免组件重挂载、保留内部状态的方法

问题原因 #

当你通过三元运算符在<Child />和<p>Hello</p>之间切换时，React会判定这是两个完全不同的组件。切换过程中，原组件（比如fatherState变为true时的<Child />）会被卸载，新组件重新渲染，因此<Child />的内部状态会随卸载被重置。

解决方案 #

方案1：用CSS控制显示/隐藏，保留组件挂载状态 #

核心思路是不卸载<Child />，而是通过CSS的display属性控制它的显示与隐藏，让组件始终保持挂载状态，从而保留内部状态。

修改后的代码示例：

const Father = () => {
  const [fatherState, setFatherState] = useState(false);
  
  return (
    <>
      {/* 通过display控制Child的显示隐藏，组件始终挂载 */}
      <Child style={{ display: fatherState ? 'none' : 'block' }} />
      {fatherState && <p>Hello</p>}
      
      <button onClick={() => setFatherState(!fatherState)}>Change father state</button>
      <p>Father state: {fatherState.toString()}</p>
    </>
  )
}

const Child = ({ style }) => {
  const [childState, setChildState] = useState(0);
  
  return (
        <div style={style}>
            <button onClick={() => setChildState(prev => prev + 1)}>Change child state</button>
            <p>Child state: {childState}</p>
        </div>
    );
}

方案2：将子组件状态提升到父组件管理 #

如果业务场景必须卸载<Child />，可以把<Child />的状态转移到父组件中保存，重新挂载时再将状态传递回去，实现状态的保留。

修改后的代码示例：

const Father = () => {
  const [fatherState, setFatherState] = useState(false);
  // 把Child的状态放在父组件中管理
  const [childState, setChildState] = useState(0);
  
  return (
    <>
      {!fatherState ? <Child childState={childState} setChildState={setChildState} /> : <p>Hello</p>}
      
      <button onClick={() => setFatherState(!fatherState)}>Change father state</button>
      <p>Father state: {fatherState.toString()}</p>
    </>
  )
}

const Child = ({ childState, setChildState }) => {
  return (
        <>
            <button onClick={() => setChildState(prev => prev + 1)}>Change child state</button>
            <p>Child state: {childState}</p>
        </>
    );
}

方案3：保持组件key一致性（不推荐） #

如果一定要用三元运算符切换组件，可以给<Child />和替换元素设置相同的key，让React认为这是同一个组件实例并尝试复用。但这种方法风险较高，因为两个组件类型不同（自定义组件与原生<p>标签），可能引发DOM异常或样式问题，仅适合特殊场景尝试。

示例代码：

const Father = () => {
  const [fatherState, setFatherState] = useState(false);
  
  return (
    <>
      {!fatherState ? <Child key="content" /> : <p key="content">Hello</p>}
      
      <button onClick={() => setFatherState(!fatherState)}>Change father state</button>
      <p>Father state: {fatherState.toString()}</p>
    </>
  )
}

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