React Hooks: В чем разница между «useMutationEffect» и «useLayoutEffect»?

Question

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

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

1. Ссылка на крючки
2. Запись в блоге Кента

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

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

1. useMutationEffect
2. useLayoutEffect
3. useEffect

Answer 1

Сначала мы должны понять различные фазы рендеринга

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

1. useMutationEffect

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

useLayoutEffect

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

useEffect

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

Обновление: Хук useMutationEffect был удален из API-хуков в https://github.com/facebook/react/pull/14336. (Кредиты: Дхавал Патель )