React切换页面时如何防止共享Menu组件被重新挂载

问题根因 #

当前Menu组件分别定义在PageA、PageB的内部，两个页面互斥渲染，切换页面时旧页面整体卸载，内部的Menu实例也会被销毁，新页面渲染时会创建全新的Menu实例，因此触发重挂载逻辑。

方案1：组件层级提升（最推荐，改造成本最低） #

将Menu组件从页面层提到公共父级（即App层）统一渲染，仅切换页面的内容区域，Menu全程不会被卸载，天然保留滚动位置。
修改后的代码示例：

const App = () => {
  const [pageKey, setPageKey] = React.useState("a");
  // 存储各页面需要传递给Menu的props
  const [menuProps, setMenuProps] = React.useState({});

  return (
    <div>
      {/* Menu放在顶层，仅挂载1次 */}
      <Menu onClick={setPageKey} {...menuProps} />
      {/* 仅切换页面内容部分 */}
      {pageKey === "a" 
        ? <PageA setMenuProps={setMenuProps} /> 
        : <PageB setMenuProps={setMenuProps} />
      }
    </div>
  );
}

// PageA改造：移除内部Menu渲染，将需要传递给Menu的props通过setMenuProps抛出
const PageA = ({setMenuProps}) => {
  const somePropsFromPageA = useSomeHooksUsedByPageA();
  // 页面渲染时更新Menu的props
  React.useEffect(() => {
    setMenuProps(somePropsFromPageA);
    return () => setMenuProps({});
  }, [somePropsFromPageA, setMenuProps]);

  return <div>Content of page A</div>;
}

// PageB同理改造
const PageB = ({setMenuProps}) => {
  const somePropsFromPageB = useSomeHooksUsedByPageB();
  React.useEffect(() => {
    setMenuProps(somePropsFromPageB);
    return () => setMenuProps({});
  }, [somePropsFromPageB, setMenuProps]);

  return <div>Content of page B</div>;
}

该方案不需要引入额外依赖，Menu的props更新逻辑完全可控，也能100%保留滚动位置等DOM状态。

方案2：保留原有Page内渲染Menu的层级，使用Portal实现单例复用 #

如果业务逻辑要求必须保持Menu写在Page组件内部的层级结构，可以通过React Portal将Menu渲染到全局公共容器，配合单例控制避免重复创建实例：

1. 先在HTML模板中新增Menu的全局挂载节点：

<div id="menu-portal-container"></div>

2. 改造Menu组件：

// 全局单例标记，控制仅创建一个Menu实例
let menuInstanceCount = 0;

const Menu = (props) => {
  const portalContainer = document.getElementById("menu-portal-container");
  // 仅第一个渲染的Menu创建DOM节点，后续复用
  const menuEl = React.useMemo(() => {
    if (menuInstanceCount === 0) {
      const el = document.createElement("div");
      menuInstanceCount++;
      return el;
    }
    return portalContainer.firstChild;
  }, []);

  React.useEffect(() => {
    if (!portalContainer.contains(menuEl)) {
      portalContainer.appendChild(menuEl);
    }
    // 页面卸载时不销毁Menu节点，仅后续更新props
    return () => {};
  }, [menuEl, portalContainer]);

  React.useEffect(()=>{
    console.log("The menu remounted");
  }, []);

  return React.createPortal(
    <div id="menu" className="has-scrollbar">
      <button onClick={() => props.onClick('a')}>A</button>
      <button onClick={() => props.onClick('b')}>B</button>
    </div>,
    menuEl
  );
}

该方案可以保持原有组件的层级写法不变，Menu只会挂载一次，切换页面时仅更新props，不会销毁重建。

方案3：页面渲染不卸载，仅用CSS控制显示隐藏 #

如果希望改造成本最低，可以不做条件渲染卸载页面，而是同时渲染两个页面，用display: none隐藏非激活页面：

const App = () => {
  const [pageKey, setPageKey] = React.useState("a");
  return (
    <div>
      <div style={{display: pageKey === 'a' ? 'block' : 'none'}}>
        <PageA onClick={setPageKey} />
      </div>
      <div style={{display: pageKey === 'b' ? 'block' : 'none'}}>
        <PageB onClick={setPageKey} />
      </div>
    </div>
  )
}

注意该方案会同时保留两个页面的所有实例和状态，页面数量多的话会有内存占用问题，仅适合页面数量极少的简单场景。

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