qiankun子应用卸载后页面数据未清除，如何解决？

这个问题的核心是生命周期的执行顺序，qiankun 的 unmount 钩子确实会在 React 组件销毁之后才触发，所以你在 unmount 里访问 chartInstance 会报错。更好的写法是把清理逻辑放在组件内部的 useEffect 里，而不是依赖 qiankun 的 unmount。

我建议你这样改：在你的 App 组件里用 useEffect 管理 chartInstance 的创建和销毁，React 的 useEffect 返回的清理函数会在组件卸载时自动执行，这比手动调用更可靠。

import { useEffect, useRef } from 'react';



function App() {

  const chartRef = useRef(null);



  useEffect(() => {

    // 初始化图表实例

    chartRef.current = { data: 'test' };

    console.log('chart instance created');



    return () => {

      // 清理逻辑

      chartRef.current = null;

      console.log('chart instance destroyed');

    };

  }, []);



  return <div>Chart Component</div>;

}



export async function mount({ container }) {

  const root = createRoot(container);

  root.render(<App />);

}



export async function unmount({ container }) {

  // 让 React 自己处理组件销毁

  container.innerHTML = '';

}

这样一来，React 的机制会帮你管理好 chartInstance 的生命周期，不用再担心 qiankun 和 React 生命周期不一致的问题。代码也更优雅，逻辑都封装在组件内部了，外部只需要关心容器的挂载和卸载。

顺带吐槽一句，qiankun 的文档对这种细节讲得真不够清楚，踩过一次坑之后才明白，还是让 React 自己干活最省心。

问题出在unmount执行时React组件已经销毁，但你还在访问React相关的实例。正确做法是把清理逻辑放在组件内部的useEffect里，而不是依赖qiankun的unmount。

修改后的代码：

import { createRoot } from 'react-dom/client';



export async function mount({ container }) {

  const root = createRoot(container);

  let chartInstance = null;



  function App() {

    React.useEffect(() => {

      chartInstance = { data: 'test' };

      return () => {

        chartInstance = null; // 在这里清理

      };

    }, []);



    return <div>Chart</div>;

  }



  root.render(<App />);

}



export async function unmount({ container }) {

  const rootElement = container.querySelector('#root');

  if (rootElement) {

    rootElement.innerHTML = '';

  }

}

就这样。