React项目中调用editor.destroy()后CKEditor5仍存在内存泄漏问题的原因排查

你遇到的内存泄漏问题，结合你的代码来看，大概率是编辑器实例销毁时机错误、自定义构建插件残留引用，或是React状态与编辑器的绑定逻辑存在漏洞导致的。下面我拆解具体原因和修复方案：

一、当前代码的核心问题 #

你的useEffect依赖数组包含了editorContent，这意味着每次编辑器内容变化时，这个effect都会重新执行，并且触发清理函数销毁编辑器——这种频繁销毁重建的操作完全没必要，不仅会产生内存碎片，还可能因为异步逻辑导致旧编辑器实例无法被GC（垃圾回收）正确回收。另外，你销毁编辑器后没有清空editor状态，残留的引用也会阻碍内存释放。

二、具体修复步骤 #

1. 调整销毁时机：仅在组件卸载时销毁编辑器 #

把编辑器销毁逻辑移到专门监听组件卸载的effect中，避免跟着内容变化频繁执行：

// 单独处理编辑器销毁逻辑，仅在组件卸载或editor实例变化时触发
useEffect(() => {
  return () => {
    if (editor) {
      // 销毁后清空状态，切断引用链
      editor.destroy().then(() => setEditor(undefined));
    }
  };
}, [editor]);

// 原effect只负责内容同步，移除销毁逻辑
useEffect(() => {
  function handleSetContent() {
    const mContent = editorContent.type === 'q' ? editorContent.question.name : editorContent.option.desc;
    setContent(mContent);
  }
  if (editor && editorContent) handleSetContent();
}, [editor, editorContent]); // 移除未用到的dispatch依赖

2. 排查自定义CKEditor构建的泄漏点 #

你的编辑器是自定义构建的ckeditor5-custom-build，这很可能是内存泄漏的根源：

• 全局事件未移除：如果插件绑定了window.resize、scroll等全局事件，销毁编辑器时没有移除监听，会导致事件回调持有编辑器实例引用；
• 外部订阅未取消：若插件订阅了Redux/MobX等外部状态，未在编辑器销毁时取消订阅，会形成持久引用；
• DOM元素残留：插件创建的额外DOM元素未在销毁时移除，被编辑器实例引用无法回收。

排查方法：用Chrome DevTools的内存快照功能，两次打开关闭编辑器后对比快照，查找保留的Editor实例、CKEditor相关DOM元素，定位到对应的问题插件。

3. 简化状态绑定，减少循环引用 #

你当前维护的content状态和编辑器data做双向绑定，其实CKEditor React组件可以直接通过editor.getData()获取内容，除非有防抖/节流等特殊需求，否则没必要额外维护状态，减少绑定能降低循环引用的概率：

// 移除content状态，需要内容时直接从editor实例获取
onChange={(event, editor) => {
  setEdited(true);
  // 提交时调用 editor.getData() 即可
}}

4. 验证组件卸载逻辑 #

如果EditorPage是通过路由切换的，要确保路由卸载时组件会触发清理函数。可以加日志验证：

useEffect(() => {
  return () => {
    console.log('EditorPage 组件已卸载');
    if (editor) {
      editor.destroy().then(() => setEditor(undefined));
    }
  };
}, [editor]);

如果没看到日志，说明组件可能被缓存（比如React Router的keep-alive类功能），需要手动触发编辑器销毁。

三、额外排查技巧 #

• 用Chrome DevTools的Performance面板录制打开关闭编辑器的操作，观察内存变化趋势；
• 用Memory面板拍摄堆快照，搜索CKEditor、Editor关键词，查看保留对象的引用链；
• 临时替换为官方默认构建，如果内存泄漏消失，可确定是自定义构建的插件问题。

内容的提问来源于stack exchange，提问作者Er.Se