React中动态渲染与卸载组件时如何保留组件状态？

嘿，我太懂你这个烦恼了！切换组件的时候辛辛苦苦攒的状态直接归零，换谁都得挠头🤦‍♂️。其实问题根源很简单：当你用{view === 'A' && <ComponentA />}这种条件渲染逻辑时，一旦view变成'B'，ComponentA就会被完全卸载，组件内部的state自然就跟着销毁了，等切回'A'的时候，React会创建一个全新的ComponentA实例，状态当然是初始值0啦。

下面给你几个实用的解决办法，都是日常开发里常用的：

方法一：状态提升到父组件（React官方推荐的方案） #

既然父组件App不会被卸载，那把需要保留的状态提到父组件里存着就好了！子组件只负责接收状态和更新状态的方法，这样不管怎么切换，状态都安安稳稳待在父组件里。

修改后的代码是这样的：

function App() {
  const [view, setView] = useState('A');
  // 把ComponentA的状态提升到父组件
  const [countA, setCountA] = useState(0);

  return (
    <>
      <button onClick={() => setView('A')}>Show A</button>
      <button onClick={() => setView('B')}>Show B</button>
      {view === 'A' && <ComponentA count={countA} onIncrement={() => setCountA(countA + 1)} />}
      {view === 'B' && <ComponentB />}
    </>
  );
}

function ComponentA({ count, onIncrement }) {
  // 子组件不再自己维护state，直接用父组件传过来的
  return <button onClick={onIncrement}>Count A: {count}</button>;
}

这个方案的好处是完全符合React的单向数据流理念，状态管理更清晰，后续如果还有其他组件要用到这个countA状态，也很容易共享。

方法二：用CSS隐藏组件，而不是卸载它 #

如果不想动状态的结构，那可以让两个组件始终保持挂载状态，只是通过CSS控制显示和隐藏。这样组件从来不会被卸载，内部state自然就一直保留着了。

代码改成这样就行：

function App() {
  const [view, setView] = useState('A');

  return (
    <>
      <button onClick={() => setView('A')}>Show A</button>
      <button onClick={() => setView('B')}>Show B</button>
      {/* 用display属性控制显示隐藏，组件始终挂载 */}
      <ComponentA style={{ display: view === 'A' ? 'block' : 'none' }} />
      <ComponentB style={{ display: view === 'B' ? 'block' : 'none' }} />
    </>
  );
}

// ComponentA的代码完全不用改！
function ComponentA() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count A: {count}</button>;
}

不过这个方法要注意：如果组件比较重（比如有大量DOM节点或者定时器、订阅），一直挂载可能会有性能开销，所以适合轻量组件的场景。

方法三：用Ref缓存组件状态（进阶玩法） #

如果不想提升状态也不想一直挂载组件，还可以用useRef在父组件里缓存子组件的状态值，等子组件重新挂载的时候把缓存的值传进去作为初始状态。比如：

function App() {
  const [view, setView] = useState('A');
  // 用ref缓存ComponentA的count状态
  const countARef = useRef(0);

  return (
    <>
      <button onClick={() => setView('A')}>Show A</button>
      <button onClick={() => setView('B')}>Show B</button>
      {view === 'A' && (
        <ComponentA 
          initialCount={countARef.current}
          onCountChange={(newCount) => countARef.current = newCount}
        />
      )}
      {view === 'B' && <ComponentB />}
    </>
  );
}

function ComponentA({ initialCount, onCountChange }) {
  // 用initialCount作为初始状态，每次变化都通知父组件更新缓存
  const [count, setCount] = useState(initialCount);
  const handleIncrement = () => {
    const newCount = count + 1;
    setCount(newCount);
    onCountChange(newCount);
  };
  return <button onClick={handleIncrement}>Count A: {count}</button>;
}

这个方法比较灵活，适合那些状态只属于子组件、不想污染父组件状态的场景，但需要手动维护缓存和状态同步，稍微麻烦一点。

内容来源于stack exchange