Медленное обновление DOM Draft.js / react-draft-wysiwyg при изменении содержимого - PullRequest
Новая
       44

Медленное обновление DOM Draft.js / react-draft-wysiwyg при изменении содержимого

1 голос
/ 30 марта 2019

Я использую оболочку Reaction-draft-wysiwyg для Draft.js. На странице у меня есть несколько экземпляров компонента Editor. У меня проблема с медленным / медленным обновлением интерфейса редактора (обработчик событий onChange). Может быть, это какой-то намек, я получаю много предупреждений в консоли [Violation] 'input' handler took <N>msA.

Screenshot from 2019-03-29 22-02-43

Моя настройка:

  • реагируют-шаблонный
  • реагировать-проект-WYSIWYG
  • перевождь
  • перевождь-сага
  • Reselect

Я диспетчеризирую действие, чтобы обработать состояние редактора, измените его обработкой 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));
  }
}

Мое избыточное состояние выглядит так: 

...
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);
    }
...

1 Ответ

0 голосов
/ 30 марта 2019

Я нашел решение для моей проблемы. По крайней мере, немного погулять. Я изменил способ обработки действий в своей саге о наблюдателях действий. Вместо takaLates эффекта я изменил на throttle с небольшой задержкой. И это намного лучше.

...