在富文本编辑器中输入时，React 页面为 'lagging'

Question

如果我打字很快，富文本编辑器在更新时会滞后。如果我按住 a 键，文本编辑器不会更新并且页面会冻结，直到我抬起该键。我尝试过同时使用 Mantine 文本编辑器和 Slate 文本编辑器。当我在他们的文档网站上使用它们时，它们都不会滞后。

我也将我的文本编辑器隔离到一个文件中，但它仍然无法工作。

import React, {useState} from 'react'
import {RichTextEditor} from '@mantine/rte'

function TextEditor() {

  const [val, setVal] = useState('')
  return (
    <RichTextEditor value={val} onChange={setVal}></RichTextEditor>
  )
}

export default TextEditor

我也刚刚在我的 index.js 文件中渲染了这个文件，以测试我的其他组件是否影响性能。但是不，它没有用，仍然落后。

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import TextEditor from './TextEditor';

ReactDOM.render(
  <React.StrictMode>
    <TextEditor />
  </React.StrictMode>,
  document.getElementById('root')
);

作为参考，我使用的富文本编辑器的 documentations/demos 在这里：

曼汀：https://mantine.dev/others/rte/#demo

板岩：https://www.slatejs.org/examples/richtext

Answer 1

您必须使用去抖动方法来避免使用 lodash 或自定义方法出现冻结问题。请检查以下 link 以获得解决方案 stack link debounce in reactjs

在富文本编辑器中输入时，React 页面为 'lagging'

React page is 'lagging' when typing in a rich text editor

rich-text-editor

reactjs

react-hooks

use-state