Да да… Я использовал этот непонятый хук.
Давайте упростим.
Разница между useLayoutEffect
и useEffect
заключается в том, когда выполняется каждый хук.
Жизненный цикл React:
- Изменения состояния в ответ на взаимодействие пользователя с пользовательским интерфейсом.
useLayoutEffect
выполняется.- Браузер рисует изменение, то есть пользователь видит измененный пользовательский интерфейс.
useEffect
выполняется.
Как мы видим, useLayoutEffect
происходит раньше, чем useEffect
, и, что более важно, происходит до того, как браузер представляет это изменение в пользовательском интерфейсе.
Вот почему решение моей проблемы с мерцанием пользовательского интерфейса заключалось в переключении с с useEffect
по useLayoutEffect
.
Когда вы должны предпочесть useLayoutEffect?
Если вам нужно обновить DOM и внести визуальные изменения в пользовательский интерфейс при первоначальном монтировании, вам следует использовать useLayoutEffect
.
Вот приближенный пример из реальной жизни, где я использовал useLayoutEffect
для решения проблемы мерцания, которая у меня была.
Авария:
- Нажатие на кнопку
click
вернет состояние в исходное состояние.
В реальном примере я не нажал кнопку для инициализации состояния, компонент размонтировался, а затем снова смонтировался, что привело к повторной инициализации состояния и Пользовательский интерфейс мерцает.
- Если состояние равно начальному, то текст не показываем:
The number is: [number]
.
{displayedNumber && <div> The number is: {displayedNumber}</div>}
Это линия, которая вызывает мерцание. потому что в то же время мы обновляем состояние displayedNumber
, чтобы оно равнялось числу (в useEffect
).
Таким образом, у нас есть быстрое удаление текста и его возврат, из-за чего UI мерцает.
При использовании useEffect
пользовательский интерфейс мерцает, потому что это происходит после рисования браузером.
При использовании useLayoutEffect
у нас нет мерцания пользовательского интерфейса, поскольку оно происходит до отрисовки браузером.