内容更改时 Draft.js / react-draft-wysiwyg DOM 更新缓慢

Question

我正在为 Draft.js 使用 react-draft-wysiwyg 包装器。在页面上，我有多个编辑器组件实例。我对编辑器 UI（onChange 事件处理程序）的 slowly/laggy 更新有疑问。也许这是一些提示，我在控制台中收到了很多警告 [Violation] 'input' handler took <N>msA。

我的设置是：

反应样板
反应草稿所见即所得
redux
redux 传奇
重新选择

我正在调度操作来处理由 redux-saga 处理的编辑器状态更改。 Saga 将检查是否有新内容并更新商店。

export function* handleOnEditorStateChange({ editorState, nameSpace }) {
  const actualEditorState = yield select(selectAllEditorsContent());
  const editorIndexToUpdate = actualEditorState.findIndex(
    editors => editors.name === nameSpace,
  );
  const currentContent = actualEditorState[
    editorIndexToUpdate
  ].state.getCurrentContent();
  const newContent = editorState.getCurrentContent();

  const hasEditorNewContent = newContent !== currentContent;

  if (hasEditorNewContent) {
    const updatedEditorState = [...actualEditorState];
    updatedEditorState[editorIndexToUpdate].state = editorState;

    yield put(storeEditorStateAction(updatedEditorState));
  }
}

我的 redux 状态是这样的：

...
editors: [
    {
      name: 'editor1',
      label: 'Editor 1',
      state: {... _immutable - draftjs }
    },
    {
      name: 'editor2',
      label: 'Editor 2',
      state: {... _immutable - draftjs }
    },
]
...

减速器：

...
    case STORE_EDITOR_STATE: {
      const { content } = action;
      return state.set('editors', content);
    }
...

Answer 1

我找到了解决问题的办法。至少有一些走动。我已经改变了我在动作观察者传奇中处理动作的方式。我将 takaLates 效果改为 throttle 并稍作延迟。而且好多了。

内容更改时 Draft.js / react-draft-wysiwyg DOM 更新缓慢

Slow update of the Draft.js / react-draft-wysiwyg DOM when content change

javascript

redux-saga

draftjs

react-boilerplate

react-draft-wysiwyg