React+Next.js如何缓存函数组件及其状态？

你的问题核心在于：切换组件时，未被选中的组件会被React卸载，导致内部状态丢失。虽然你提前在useState里生成了组件实例，但React只会渲染当前选中的组件，其他实例不会挂载到DOM（或挂载后被移除），状态自然就清空了。

下面是两种简单有效的解决方法：

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

让所有页面组件始终挂载在DOM中，仅通过display属性控制显示/隐藏，这样组件状态会一直保留。

修改page.tsx代码如下：

"use client";

import "./home.scss";
import Index from "./index";
import Hot from "./hot";
import Me from "./me";
import { useState } from "react";

export default function Home() {
  // 直接定义页面配置，无需提前实例化组件
  const pages = [
    { name: "首页", component: Index },
    { name: "热榜", component: Hot },
    { name: "我的", component: Me },
  ];
  const [idx, setIdx] = useState(0);

  return (
    <>
      {/* 渲染所有组件，仅显示当前选中的 */}
      {pages.map((p, i) => {
        const PageComponent = p.component;
        return (
          <div 
            key={i} 
            style={{ display: i === idx ? "block" : "none" }}
          >
            <PageComponent />
          </div>
        );
      })}
      <nav>
        {pages.map((p, i) => (
          <div onPointerUp={() => setIdx(i)} key={i}>
            <p>{p.name}</p>
          </div>
        ))}
      </nav>
    </>
  );
}

修改后，切换导航时未选中的组件只是被隐藏，不会被卸载，状态会完整保留。比如在首页点击+按钮增加count，切换到热榜再返回，count的值依然存在。

方法二：状态提升（适合简单场景） #

如果页面组件的状态不多，可以把状态提升到父组件page.tsx中，通过props传递给子组件。这种方式避免了组件卸载导致的状态丢失，但页面复杂时会增加父组件的复杂度。

示例修改（以Index和Hot组件为例）：

// page.tsx
"use client";

import "./home.scss";
import Index from "./index";
import Hot from "./hot";
import Me from "./me";
import { useState } from "react";

export default function Home() {
  const [idx, setIdx] = useState(0);
  // 提升子组件状态到父组件
  const [indexCount, setIndexCount] = useState(0);
  const [hotCount, setHotCount] = useState(0);

  return (
    <>
      {idx === 0 && <Index count={indexCount} setCount={setIndexCount} />}
      {idx === 1 && <Hot count={hotCount} setCount={setHotCount} />}
      {idx === 2 && <Me />}
      <nav>
        {["首页", "热榜", "我的"].map((name, i) => (
          <div onPointerUp={() => setIdx(i)} key={i}>
            <p>{name}</p>
          </div>
        ))}
      </nav>
    </>
  );
}

// index.tsx
"use client";

export default function Index({ count, setCount }: { count: number; setCount: (num: number) => void }) {
  console.log("index");
  return (
    <div>
      <p>index</p>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

这种方式需要修改子组件，把状态逻辑移到父组件，适合状态简单的场景。

总结 #

优先选择方法一，实现简单且对原有组件代码改动最小，能完美保留组件状态。如果是复杂的多页面路由跳转场景（不是单页内组件切换），可以考虑使用Next.js的Router Cache或者状态管理库（如Zustand、Redux）来持久化状态。

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