React多页面切换：如何保留离屏组件状态且不渲染更新？

可以实现，以下是React Offscreen正式推出前的几种模拟方案：

方案一：CSS隐藏 + 组件内部控制耗时逻辑 #

让页面组件始终保持挂载，用CSS隐藏不可见页面，同时在组件内部通过visible标识跳过Context变化触发的耗时操作，既保留本地状态，又避免不必要的性能开销。

父组件代码 #

return (
  <div>
    <div style={{ display: currentScreen === 'page1' ? 'block' : 'none' }}>
      <Screen {...page1config} visible={currentScreen === 'page1'} />
    </div>
    <div style={{ display: currentScreen === 'page2' ? 'block' : 'none' }}>
      <Screen {...page2config} visible={currentScreen === 'page2'} />
    </div>
  </div>
)

页面组件内部处理 #

function Screen({ visible, ...props }) {
  // 本地状态会始终保留，因为组件从未卸载
  const [localState, setLocalState] = useState(initialValue);

  // 监听顶层Context变化，但仅在页面可见时执行耗时操作
  useContext(TopLevelContext, (newValue) => {
    if (!visible) return;
    // 这里放置原本的耗时操作逻辑
  });

  // 页面不可见时返回空容器（维持组件挂载状态），不渲染实际内容
  if (!visible) return <div />;

  return (
    {/* 页面原本的渲染内容 */}
  );
}

优缺点：状态无需额外维护，完全保留；但不可见页面会占用少量DOM节点资源，不过不会执行核心渲染和耗时逻辑。

方案二：状态提升 + 条件挂载 #

将页面的本地状态提取到父组件或全局状态容器中，切换页面时组件卸载，但状态保留在父级，下次挂载时再将状态传递回去。

父组件代码 #

// 提前维护各页面的本地状态
const [page1State, setPage1State] = useState(initialPage1State);
const [page2State, setPage2State] = useState(initialPage2State);

const page1 = currentScreen === 'page1' ? (
  <Screen 
    {...page1config} 
    localState={page1State}
    setLocalState={setPage1State}
  />
) : null;

const page2 = currentScreen === 'page2' ? (
  <Screen 
    {...page2config} 
    localState={page2State}
    setLocalState={setPage2State}
  />
) : null;

return (
  <div>
    {page1}
    {page2}
  </div>
)

页面组件内部处理 #

function Screen({ localState, setLocalState, ...props }) {
  // 直接使用父级传入的状态，替代组件内部的useState
  // 所有状态更新操作都通过setLocalState完成

  return (
    {/* 页面原本的渲染内容 */}
  );
}

优缺点：完全避免不可见页面的挂载开销；但需要手动维护每个页面的状态，组件与父级状态耦合度较高，适合状态逻辑简单的页面。

方案三：自定义模拟Offscreen组件 #

封装一个通用的Offscreen组件，结合React.memo和CSS隐藏，统一控制子组件的可见性与渲染逻辑，复用性更强。

自定义Offscreen组件 #

const Offscreen = React.memo(({ visible, children }) => {
  // 给子组件传递visible属性，方便子组件内部控制逻辑
  const childWithVisibleProp = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { visible });
    }
    return child;
  });

  return (
    <div style={{ display: visible ? 'block' : 'none' }}>
      {/* 仅在可见时渲染子组件实际内容，否则返回空容器 */}
      {visible ? childWithVisibleProp : <div />}
    </div>
  );
});

使用方式 #

return (
  <div>
    <Offscreen visible={currentScreen === 'page1'}>
      <Screen {...page1config} />
    </Offscreen>
    <Offscreen visible={currentScreen === 'page2'}>
      <Screen {...page2config} />
    </Offscreen>
  </div>
)

页面组件内部的处理逻辑和方案一一致，通过visible prop跳过耗时操作即可。

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