React容器卸载时如何正确Unrender微前端MFE组件？

方案1：在容器卸载触发时提前执行卸载逻辑 #

不要等到容器的useEffect清理阶段（此时DOM已被移除）再处理，而是在触发容器隐藏/卸载的动作（比如点击切换MFE的按钮）中，先调用卸载方法再操作DOM：

const handleSwitchMFE = () => {
  const mfeContainer = document.getElementById('mfe1-container');
  if (mfeContainer) {
    ReactDOM.unmountComponentAtNode(mfeContainer);
  }
  // 之后再执行隐藏容器或切换其他MFE的逻辑
  setShowMFE1(false);
};

这样能保证卸载方法调用时DOM节点还存在，正常触发MFE的卸载生命周期（比如console.log("MFE1 is unrendered")）。

方案2：封装带卸载逻辑的MFE容器组件 #

把MFE的渲染和卸载逻辑封装到独立组件中，利用组件useEffect的清理函数（此时容器DOM尚未被移除）执行卸载：

import { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const MFEContainer = ({ renderMFE }) => {
  const containerRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      renderMFE(containerRef.current);
    }

    // 清理函数会在组件卸载前执行，此时DOM仍存在
    return () => {
      if (containerRef.current) {
        ReactDOM.unmountComponentAtNode(containerRef.current);
      }
    };
  }, [renderMFE]);

  return <div ref={containerRef} />;
};

使用这个组件包裹MFE，当组件被卸载时，会自动触发MFE的卸载操作。

方案3：React 18+ 改用createRoot实现卸载 #

如果你的项目使用React 18，推荐用新版的createRootAPI，它提供了更直接的卸载方式，无需依赖DOM节点状态：

// 渲染MFE时
const root = ReactDOM.createRoot(document.getElementById('mfe1-container'));
root.render(<MFE1 />);

// 需要卸载时
root.unmount();

在切换MFE或容器卸载的触发逻辑中调用root.unmount()即可，能可靠触发MFE的卸载生命周期。

内容的提问来源于stack exchange，提问作者Hei Yui Wong