IceStark 微前端模块卸载问题的分析与修复

在微前端框架 IceStark 的使用过程中，开发者可能会遇到一个常见的模块卸载问题。本文将深入分析该问题的成因，并提供可靠的解决方案。

问题背景

当我们在 React 组件中使用 IceStark 的 mountModule 和 unmoutModule 方法来加载和卸载微前端模块时，如果在 useEffect 的清理函数中直接使用 ref.current，可能会遇到模块无法正确卸载的情况。

问题代码分析

原始实现方式如下：

useEffect(() => {
  mountModule(moduleInfo, renderNode.current, {});
  return () => {
    unmoutModule(moduleInfo, renderNode.current);
  }
}, []);

这段代码的问题在于：当组件卸载时，React 会先执行清理函数，然后才会将 ref.current 置为 null。如果在清理函数中直接使用 renderNode.current，此时它可能已经被置为 null，导致 unmoutModule 无法获取到正确的 DOM 节点。

解决方案

正确的做法是在 useEffect 执行时就保存 DOM 节点的引用：

useEffect(() => {
  const dom = renderNode.current;
  mountModule(moduleInfo, dom, {});
  return () => {
    unmoutModule(moduleInfo, dom);
  }
}, []);

这种方式的优势在于：

1. 在组件挂载时就保存了 DOM 节点的引用
2. 清理函数中使用的是闭包中保存的引用，不受 React ref 变化的影响
3. 确保了模块卸载时能够获取到正确的 DOM 节点

深入理解

这个问题本质上是一个 React ref 使用时的常见陷阱。在 React 的生命周期中：

1. 组件挂载时，ref.current 会被设置为对应的 DOM 节点
2. 组件卸载时，React 会先执行清理函数，然后将 ref.current 置为 null

因此，如果我们依赖 ref.current 来执行清理操作，就可能遇到引用丢失的问题。通过闭包保存初始引用是 React 开发中的一种常见模式，特别是在处理第三方库集成时。

最佳实践建议

在使用 IceStark 或其他微前端框架时，建议：

1. 对于任何需要在清理阶段使用的 DOM 引用，都应该在 effect 执行时立即保存
2. 考虑将微前端模块的生命周期管理与组件生命周期更紧密地绑定
3. 在复杂场景下，可以封装自定义 hook 来统一处理微前端模块的加载和卸载

通过这种方式，可以确保微前端模块在应用中的生命周期管理更加可靠，避免内存泄漏和状态残留等问题。