javascript - CKEditor5 React 内存使用情况
问题描述
我在反应项目中使用 CKEditor5。每次用户打开编辑器页面时,浏览器的内存使用量都会增加。我把editor.destroy()
清理状态。但它似乎对内存使用没有影响,因为问题还在继续。
它以大约 300 mb 的内存使用量开始,然后在打开和关闭具有编辑器内容的数十个不同页面后,它会上升到 2000 mb 或更多。
可能是什么原因?
// ... other packages
import { CKEditor } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
function EditorPage(props) {
const { editorContent } = useSelector(({ publisher }) => publisher.board);
const [edited, setEdited] = useState(false);
const [content, setContent] = useState('');
const [editor, setEditor] = useState(undefined);
useEffect(() => {
function handleSetContent() {
const mContent = editorContent.type === 'q' ? editorContent.question.name : editorContent.option.desc;
setContent(mContent);
}
if (editor && editorContent) handleSetContent();
return () => {
if (editor) {
editor.destroy()
}
};
}, [dispatch, editor, editorContent]);
//** cleaned remaining code here//
return (
<div className="flex flex-1 flex-auto flex-col w-full h-full relative">
<CKEditor
editor={Editor}
config={editorConfiguration}
data={content}
onReady={editor => {
// You can store the "editor" and use when it is needed.
setEditor(editor);
}}
onChange={(event, editor) => {
const data = editor.getData();
setContent(data);
setEdited(true);
//console.log({ event, editor, data });
}}
onBlur={(event, editor) => {
//console.log('Blur.', editor);
}}
onFocus={(event, editor) => {
//console.log('Focus.', editor);
}}
/>
</div>
);
}
export default EditorPage;
解决方案
推荐阅读
- java - 连接到 MySQL 成功,但在查询时出现 Communications link failure 错误
- reactjs - 无法清除material-ui Aucocomplete中的输入文本
- javascript - 如何同时增加值而不是按顺序映射它们?
- javascript - 未捕获的类型错误:Inventory.updateInventory 不是函数
- ios - 每天在 Firebase 上检索不同的字符串 - swift
- android - 如何将 ID 的数组列表更改为其他列值 SQLite 的数组列表?
- html - 在网页中从右到左显示内容(html 和 css)
- java - 使用 badass-runtime 插件中的图像运行 gradle 测试
- angular - gojs-angular 无法重现最小示例
- android - 如何一键滑动两个列表视图