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

Question

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

我的设置是：

• 反应-样板
• 反应-草案所见即所得
• 终极版
• 终极版的故事
• 重新选择

我调度动作来处理编辑器状态更改由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有一点延迟。而且它好多了。