Реагировать на хуки: в чем разница между useMutationEffect и useLayoutEffect?

В чем разница между useMutationEffect и useLayoutEffect с точки зрения использования?

Я прочитал все доступные материалы в Интернете, включая (но не ограничиваясь)

  1. Справочник по хукам
  2. Сообщение в блоге Кента

Разница между useEffect и двумя другими крючками очевидна. но разница между useMutationEffect и useLayoutEffect все еще не ясна.

Я знаю, что порядок исполнения такой:

  1. useMutationEffect
  2. useLayoutEffect
  3. useEffect

reactjs react-hooks
person Abdul Rauf    schedule 28.11.2018    source источник

Ответы (1)


arrow_upward
20
arrow_downward

Во-первых, вы должны понимать различные фазы рендеринга.

Мутация DOM, видимая пользователю, должна запускаться синхронно перед следующей отрисовкой, чтобы пользователь не почувствовал визуальную несогласованность. В этом конкретном случае мы должны использовать useMutationEffect или useLayoutEffect, чтобы блокировать визуальные обновления. Единственная разница между ними в том, что мы должны использовать useLayoutEffect, если хотим читать Layout из DOM. В противном случае мы должны использовать useMutationEffect.

  1. useMutationEffect

Он запускается синхронно перед этапом макета, то есть во время той же фазы, на которой React выполняет мутации DOM. Используйте его, чтобы выполнить блокировку пользовательских мутаций DOM, не выполняя никаких макетов измерения / чтения DOM.

  1. useLayoutEffect

Он запускается синхронно после всех мутаций DOM, но до фазы Paint. Используйте это, чтобы прочитать макет (стили или информацию о макете) из DOM, а затем выполнить блокировку пользовательских мутаций DOM на основе макета.

  1. useEffect

Он запускается после того, как рендеринг зафиксирован на экране, то есть после этапов макета и рисования. По возможности используйте это, чтобы не блокировать визуальные обновления.

Обновление: ловушка useMutationEffect удалена из Hooks API в этом PR. (Кредиты: Дхавал Патель)

person Abdul Rauf    schedule 28.11.2018