ReactJS组件如何实现每次访问均触发懒加载而非仅首次加载？

React.lazy 会缓存已加载的组件模块，所以首次加载后不会重复触发懒加载行为。要实现每次切换标签或从其他路由返回时都触发懒加载（包括重新加载组件代码并显示加载状态），可以通过以下两种方式处理：

方式一：强制重新加载组件代码（显示加载 fallback） #

这种方式会让浏览器重新请求组件的代码 chunk，每次切换标签或返回页面时都会显示加载状态。核心是通过**缓存破折号（cache-busting）**修改导入路径，让浏览器认为是新资源。

步骤1：创建动态懒加载组件 #

import React, { useState, useEffect } from "react";

const DynamicLazy = ({ loader, triggerKey, fallback = <div>Loading</div> }) => {
  const [Component, setComponent] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 触发加载时重置状态
    setIsLoading(true);
    setComponent(null);

    // 执行导入并更新组件
    loader()
      .then(module => {
        setComponent(module.default);
        setIsLoading(false);
      })
      .catch(err => {
        console.error("组件加载失败：", err);
        setIsLoading(false);
      });
  }, [loader, triggerKey]);

  if (isLoading || !Component) return fallback;
  return <Component />;
};

步骤2：修改主组件代码 #

import React, { useState, useRef } from "react";
import { MDBox, Tabs, Tab } from "@mui/material";
import DynamicLazy from "./DynamicLazy";

const TabPage = () => {
  const [valueTab, setValueTab] = useState(0);
  const refreshCounter = useRef(0);

  // 每次切换标签或组件挂载时，递增计数器生成新的缓存键
  useEffect(() => {
    refreshCounter.current += 1;
  }, [valueTab]);

  const handleChange = (_, newValue) => setValueTab(newValue);

  // 带缓存破折号的导入函数
  const loadIncoming = () => import(`./Incoming?refresh=${refreshCounter.current}`);
  const loadOutgoing = () => import(`./Outgoing?refresh=${refreshCounter.current}`);

  return (
    <MDBox>
      <MDBox sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={valueTab}
          onChange={handleChange}
          textColor="secondary"
          indicatorColor="secondary"
        >
          <Tab label="Incoming" />
          <Tab label="Outgoing" />
        </Tabs>
      </MDBox>

      <div
        role="tabpanel"
        hidden={valueTab !== 0}
        id="simple-tabpanel-0"
        aria-labelledby="simple-tab-0"
      >
        <DynamicLazy loader={loadIncoming} triggerKey={`incoming-${refreshCounter.current}`} />
      </div>

      <div
        role="tabpanel"
        hidden={valueTab !== 1}
        id="simple-tabpanel-1"
        aria-labelledby="simple-tab-1"
      >
        <DynamicLazy loader={loadOutgoing} triggerKey={`outgoing-${refreshCounter.current}`} />
      </div>
    </MDBox>
  );
};

export default TabPage;

方式二：仅重新挂载组件（不重新加载代码） #

如果不需要重新加载组件代码，只是想让组件重新执行生命周期（比如刷新数据），可以通过给懒加载组件添加动态 key 实现。这种方式不会显示 Suspense 的加载 fallback，但会触发组件内部的 useEffect 等钩子。

修改原代码中的 tabpanel 部分：

import React, { useState, useRef } from "react";
import { Suspense } from "react";
const OutgoingTabComponent = React.lazy(() => import("./Outgoing"));
const IncomingTabComponent = React.lazy(() => import("./Incoming"));

// ... 其他代码不变 ...

<div
  role="tabpanel"
  hidden={valueTab !== 0}
  id="simple-tabpanel-0"
  aria-labelledby="simple-tab-0"
>
  <Suspense fallback={<div>Loading</div>}>
    {/* 用计数器作为key，每次切换标签时重新挂载组件 */}
    <IncomingTabComponent key={`incoming-${refreshCounter.current}`} />
  </Suspense>
</div>
<div
  role="tabpanel"
  hidden={valueTab !== 1}
  id="simple-tabpanel-1"
  aria-labelledby="simple-tab-1"
>
  <Suspense fallback={<div>Loading</div>}>
    <OutgoingTabComponent key={`outgoing-${refreshCounter.current}`} />
  </Suspense>
</div>

关键说明 #

• 方式一适合需要完全刷新组件代码的场景（比如组件代码可能动态更新）。
• 方式二更适合仅需要刷新组件数据的场景，性能开销更小。

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