React中切换页面时如何保持各页面的状态？

你当前的代码里，切换到Screen2时Screen1会被卸载，再次切回时组件重新挂载，所以内部的count状态会重置为0。要保持状态，有几种可行的解决方法：

方法一：用CSS隐藏组件而非卸载 #

不用条件渲染销毁组件，而是通过display属性控制显示/隐藏，让组件始终保留在DOM中，状态自然不会丢失：

import React, { useState } from "react";

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

  return (
    <div>
      <div style={{ display: screen === "screen1" ? "block" : "none" }}>
        <Screen1 />
      </div>
      <div style={{ display: screen === "screen2" ? "block" : "none" }}>
        <Screen2 />
      </div>
      <button onClick={() => setScreen(screen === "screen1" ? "screen2" : "screen1")}>
        Toggle Screen
      </button>
    </div>
  );
}

function Screen1() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Screen 1</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function Screen2() {
  return (
    <div>
      <h1>Screen 2</h1>
      <p>Some other content</p>
    </div>
  );
}

方法二：将状态提升到父组件 #

把Screen1的count状态移到父组件App中，通过props传递给Screen1。这样即使Screen1被卸载，状态仍保存在父组件里，再次挂载时能直接恢复：

import React, { useState } from "react";

export default function App() {
  const [screen, setScreen] = useState("screen1");
  const [count, setCount] = useState(0); // 状态提升至父组件

  return (
    <div>
      {screen === "screen1" ? (
        <Screen1 count={count} setCount={setCount} />
      ) : (
        <Screen2 />
      )}
      <button onClick={() => setScreen(screen === "screen1" ? "screen2" : "screen1")}>
        Toggle Screen
      </button>
    </div>
  );
}

function Screen1({ count, setCount }) {
  // 直接使用父组件传递的状态和更新方法
  return (
    <div>
      <h1>Screen 1</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

function Screen2() {
  return (
    <div>
      <h1>Screen 2</h1>
      <p>Some other content</p>
    </div>
  );
}

方案选择建议 #

• 方法一适合组件逻辑独立、不需要优化性能的场景，实现简单，组件自主管理状态。
• 方法二更符合React状态管理的设计理念，适合需要在多个组件间共享状态，或者需要父组件控制子组件状态的场景。

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