React切换组件时阻止未变更URL的iframe重新加载

问题原因 #

你当前的代码中，切换toggle状态时，React会直接卸载前一个子组件（如IframeComponent）并挂载另一个（如SecondIFrameComponent）——这两个是不同的组件类型，即使url没有变化，React也会销毁旧组件实例并创建新实例，导致iframe重新加载。useMemo和React.memo之所以无效，是因为它们只能阻止同一组件在props未变更时的重渲染，无法阻止组件被卸载重建。

可行解决方案 #

方案1：复用单个组件（推荐，适用于子组件逻辑相似的场景）

如果两个子组件的核心逻辑都是渲染iframe，只是url不同，可以将它们合并为一个组件，通过props传递不同的url。这样组件实例会一直保留，只有当url真正变化时，iframe才会重新加载。

修改后的代码：

App.tsx

import React, { useState } from 'react';
import './App.css';
import IframeComponent from './IframeComponent';

function App() {
  const [toggle, setToggle] = useState(false);

  const toggleIframe = () => {
    setToggle(prevToggle => !prevToggle);
  };

  // 根据切换状态选择对应url
  const currentUrl = toggle ? "www.example.com" : "www.example2.com";

  return (
    <div>
      <button onClick={toggleIframe}>Toggle Iframe</button>
      <IframeComponent url={currentUrl} />
    </div>
  );
}

export default App;

IframeComponent.tsx

import React from 'react';

// 明确类型定义，避免any
interface IframeProps {
  url: string;
}

const IframeComponent = ({ url }: IframeProps) => {
  return <iframe src={url} />;
};

export default IframeComponent;

方案2：同时渲染组件并通过CSS控制显隐（适用于子组件逻辑差异大的场景）

如果两个子组件有不同的业务逻辑无法合并，可以同时渲染两个组件，通过display属性控制显示或隐藏。这样组件不会被卸载，iframe的状态会被保留。

修改后的代码：

App.tsx

import React, { useState } from 'react';
import './App.css';
import IframeComponent from './IframeComponent';
import SecondIFrameComponent from './SecondIFrameComponent';

function App() {
  const [toggle, setToggle] = useState(false);

  const toggleIframe = () => {
    setToggle(prevToggle => !prevToggle);
  };

  return (
    <div>
      <button onClick={toggleIframe}>Toggle Iframe</button>
      {/* 根据toggle控制显示隐藏 */}
      <IframeComponent 
        url="www.example.com" 
        style={{ display: toggle ? 'block' : 'none' }} 
      />
      <SecondIFrameComponent 
        url="www.example2.com" 
        style={{ display: toggle ? 'none' : 'block' }} 
      />
    </div>
  );
}

export default App;

IframeComponent.tsx（SecondIFrameComponent同理）

import React from 'react';

interface IframeProps {
  url: string;
  style?: React.CSSProperties;
}

const IframeComponent = ({ url, style }: IframeProps) => {
  return <iframe src={url} style={style} />;
};

export default IframeComponent;

方案3：使用useRef手动管理组件显隐（进阶场景）

如果不想让未显示的组件占据DOM空间（或有其他特殊需求），可以用useRef获取组件容器的DOM节点，通过useEffect监听toggle变化来控制显隐，效果和方案2一致，但更灵活。

App.tsx

import React, { useState, useRef, useEffect } from 'react';
import './App.css';
import IframeComponent from './IframeComponent';
import SecondIFrameComponent from './SecondIFrameComponent';

function App() {
  const [toggle, setToggle] = useState(false);
  const iframe1Container = useRef<HTMLDivElement>(null);
  const iframe2Container = useRef<HTMLDivElement>(null);

  const toggleIframe = () => {
    setToggle(prevToggle => !prevToggle);
  };

  // 监听toggle变化，控制容器显隐
  useEffect(() => {
    if (iframe1Container.current && iframe2Container.current) {
      iframe1Container.current.style.display = toggle ? 'block' : 'none';
      iframe2Container.current.style.display = toggle ? 'none' : 'block';
    }
  }, [toggle]);

  return (
    <div>
      <button onClick={toggleIframe}>Toggle Iframe</button>
      <div ref={iframe1Container}>
        <IframeComponent url="www.example.com" />
      </div>
      <div ref={iframe2Container} style={{ display: 'none' }}>
        <SecondIFrameComponent url="www.example2.com" />
      </div>
    </div>
  );
}

export default App;

总结 #

要避免iframe重复加载，核心是避免组件被React卸载：要么复用同一个组件实例，要么让组件一直存在于DOM中（通过隐藏而非卸载）。useMemo和React.memo无法解决组件卸载重建的问题，因此对你的场景无效。

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