React中如何在父组件卸载后保持iframe挂载以避免重复加载

单纯靠memoize组件没法阻止iframe重复加载——只要组件被卸载后重新挂载，iframe就会被重新创建，src属性会触发新的网络请求，这是浏览器的默认行为，和React的memo缓存无关。

你当前代码的问题 #

你用{showApp && App}控制组件的挂载与卸载：当切换到App2时，MyApp（以及内部的App1）会被完全卸载；切回App1时，MyApp和App1会重新挂载，iframe自然会重新加载。哪怕用了useMemo，也只能缓存组件元素的引用，但组件卸载后实例已销毁，重新挂载时只能生成新实例，无法复用之前的iframe。

可行的解决方案 #

核心思路是不要卸载带iframe的组件，而是通过CSS隐藏它，这样组件实例会一直保存在DOM中，iframe不会重新加载。

方案1：通过display控制显示/隐藏

修改代码，让所有可能的App都渲染到DOM中，用display属性控制是否可见：

const App1 = () => {
  useEffect(() => {
    console.log("App1 mounted");
  }, []);

  return (
    <iframe
      width="100%"
      height="254"
      src="https://www.google.com/webhp?igu=1"
    ></iframe>
  );
};

const App2 = () => {
  useEffect(() => {
    console.log("App2 mounted");
  }, []);

  return (<div style={{ color: "red" }}>This is App2</div>);
};

const MyApp = ({ activeApp }) => {
  return (
    <div>
      <span>This is MyApp Container:</span>
      <div style={{ display: activeApp === "1" ? "block" : "none" }}>
        <App1 />
      </div>
      <div style={{ display: activeApp === "2" ? "block" : "none" }}>
        <App2 />
      </div>
    </div>
  );
};

export default function App() {
  const [activeApp, setActiveApp] = useState(null);

  return (
    <div>
      <div onClick={() => setActiveApp("1")}>Show App 1</div>
      <div onClick={() => setActiveApp("2")}>Show App 2</div>
      {activeApp && <MyApp activeApp={activeApp} />}
    </div>
  );
}

这样App1只会在首次渲染时挂载一次，切换到App2时只是被隐藏，切回App1时直接显示已加载好的iframe，不会触发重新请求。

方案2：始终保持MyApp挂载

如果不想同时渲染所有App，也可以让MyApp始终处于挂载状态，内部通过状态切换显示的组件，但要注意不能卸载App1，而是用隐藏替代：

// 保持App1、App2不变
const MyApp = ({ activeApp }) => {
  return (
    <div>
      <span>This is MyApp Container:</span>
      <div style={{ display: activeApp === "1" ? "block" : "none" }}>
        <App1 />
      </div>
      <div style={{ display: activeApp === "2" ? "block" : "none" }}>
        <App2 />
      </div>
    </div>
  );
};

export default function App() {
  const [activeApp, setActiveApp] = useState(null);

  // 始终渲染MyApp，不卸载
  return (
    <div>
      <div onClick={() => setActiveApp("1")}>Show App 1</div>
      <div onClick={() => setActiveApp("2")}>Show App 2</div>
      <MyApp activeApp={activeApp} />
    </div>
  );
}

总结 #

memoize只能缓存组件的引用或计算结果，但无法阻止组件卸载导致的实例销毁。要避免iframe重复加载，必须保证带iframe的组件始终挂载在DOM中，仅通过CSS控制显示状态。

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