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

Question

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

我的设置是：

• 反应样板
• 反应草案所见即所得
• redux
• redux-saga
• 重新选择

Im调度操作来处理编辑器状态更改，该操作由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。而且要好得多。