如何让组件卸载重渲染后保留状态？屏幕切换维持原有状态

我有两个通过条件渲染实现的屏幕，期望切换离开并返回后，屏幕状态能保持不变。比如在示例代码里，在ScreenA滚动地图后切换到ScreenB，再返回ScreenA时，地图应该停留在之前滚动的位置，但现在它会重新渲染，清空用户之前的操作进度。

核心需求：

• 往返ScreenB后，ScreenA保留用户操作后的状态
• 切换屏幕时底部导航按钮始终可见
• 不想用状态管理系统手动存储每个组件的状态（实际场景中屏幕上组件很多，手动存状态不现实）

试过用useCallback，但没效果。

示例代码：

export default function App() {
  const [screen, setScreen] = useState('A');

  function navToA() {
    setScreen('A');
  }

  function navToB() {
    setScreen('B');
  }

  const RenderScreen = useCallback((props) => {
    return <ScreenA />;
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      {screen === 'A' && <RenderScreen />} {/* 用户操作进度在切换到ScreenB再返回后丢失 */}
      {screen === 'B' && <ScreenB />}

      <TouchableOpacity onPress={() => navToA()} style={styles.buttonStyleA}>
        <Text>A</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => navToB()} style={styles.buttonStyleB}>
        <Text>B</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

问题本质是条件渲染会在不满足条件时卸载对应组件，组件内部的所有状态（比如地图滚动位置）都会被销毁。要保留状态，必须让组件始终挂载在DOM中，只控制显示/隐藏，而非卸载。

方法1：用display样式控制显示隐藏 #

把两个屏幕组件都保留在DOM树里，通过display属性切换可见性：

export default function App() {
  const [screen, setScreen] = useState('A');

  function navToA() {
    setScreen('A');
  }

  function navToB() {
    setScreen('B');
  }

  return (
    <SafeAreaView style={styles.container}>
      {/* 组件始终挂载，仅通过display控制显示 */}
      <ScreenA style={{ display: screen === 'A' ? 'flex' : 'none' }} />
      <ScreenB style={{ display: screen === 'B' ? 'flex' : 'none' }} />

      <TouchableOpacity onPress={() => navToA()} style={styles.buttonStyleA}>
        <Text>A</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => navToB()} style={styles.buttonStyleB}>
        <Text>B</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

注意：如果ScreenA/ScreenB是自定义组件，需要把传入的style透传到内部根容器：

const ScreenA = ({ style }) => {
  return (
    <View style={[styles.screenWrapper, style]}>
      {/* 地图和其他组件内容 */}
    </View>
  );
};

方法2：用visibility控制（可选场景） #

如果需要组件占据布局空间但不可见（比如保持页面高度不变），可以用visibility: hidden替代display: none。这种方式组件仍会正常渲染，只是视觉上隐藏：

<ScreenA style={{ visibility: screen === 'A' ? 'visible' : 'hidden' }} />

为什么useCallback没用？ #

useCallback只是缓存了渲染ScreenA的函数，但当screen === 'A'不成立时，组件还是会被React卸载，内部状态自然丢失。缓存函数无法改变组件的挂载/卸载状态，因此解决不了问题。

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