Фаза отображения и фиксация DOM

Рабочий цикл React состоит из двух основных фаз: фазы отрисовки и фазы применения изменений. Во время фазы отрисовки React вызывает функции компонентов и строит виртуальное представление пользовательского интерфейса — волоконное дерево. Во время фазы применения изменений React переносит изменения из волоконного дерева в настоящий DOM.

В конкурентном режиме React 18 фазу отрисовки можно приостановить, прервать или начать заново. React может вызвать функцию компонента несколько раз, прежде чем применить какие-либо изменения. Поэтому функции компонентов должны быть чистыми: у них не должно быть побочных эффектов, поскольку функция может выполняться более одного раза для одного видимого обновления.

В отличие от фазы отрисовки фаза применения изменений всегда выполняется синхронно и доводится до конца. React нельзя прервать во время применения изменений к DOM. Благодаря этому DOM никогда не остаётся в частично обновлённом состоянии. После каждого применения изменений пользователи видят полностью согласованный интерфейс.

Фаза применения изменений состоит из трёх подпроцессов: до изменения (здесь выполняется getSnapshotBeforeUpdate компонента-класса, чтобы прочитать значения DOM до изменений), изменение (React вставляет, обновляет и удаляет узлы DOM) и раскладка (здесь синхронно выполняются эффекты, в частности useLayoutEffect и componentDidMount/componentDidUpdate компонента-класса).

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

Браузер выполняет отрисовку между фазой раскладки, где запускается useLayoutEffect, и фазой пассивных эффектов, где запускается useEffect. Это важное различие во времени: useLayoutEffect выполняется до отрисовки, а useEffect — после неё. Для эффектов, изменяющих визуальный результат, это различие имеет большое значение.

Если useEffect считывает DOM и обновляет состояние, например измеряет элемент и задаёт состояние его размера, React снова выполнит отрисовку и применит изменения. Браузер выполнит отрисовку дважды: сначала с исходным размером, затем с исправленным. Пользователь может увидеть кратковременную вспышку элемента неправильного размера, прежде чем появится исправление.

React внутренне строит дерево узлов «волокон» — по одному на каждый экземпляр компонента. В каждом волокне хранятся состояние, эффекты и результат работы компонента. На этапе рендеринга React создаёт новое рабочее дерево волокон. На этапе фиксации это рабочее дерево становится текущим, а старое повторно используется.

React в строгом режиме намеренно дважды вызывает функции компонентов и эффекты в режиме разработки, чтобы помочь обнаружить побочные эффекты. И useLayoutEffect, и useEffect монтируются, размонтируются и монтируются снова. В рабочей среде этот двойной вызов не происходит. Это помогает выявить ошибки, возникающие из-за неправильной очистки эффектов.

Поскольку этап рендеринга может быть прерван и запущен повторно, функции компонентов должны выдавать одинаковый результат для одинаковых входных данных и не иметь побочных эффектов. Изменения, подписки и вызовы API в теле функции, а не в эффектах, будут выполняться чаще, чем ожидается, в конкурентном режиме, что приведёт к ошибкам.

Никогда не читайте свойства DOM непосредственно в теле функции компонента. DOM может ещё не существовать при серверном рендеринге или может быть устаревшим при повторном рендеринге. Всегда читайте DOM внутри useLayoutEffect для чтения до отрисовки или useEffect для чтения после отрисовки, где DOM гарантированно актуален.

На каком подэтапе этапа фиксации React срабатывает useLayoutEffect?

На этапе рендеринга React строит дерево волокон, и этот этап может быть прерван; этап фиксации применяет изменения к DOM и всегда выполняется синхронно. Фиксация состоит из трёх подэтапов: до изменения, изменение и компоновка. useLayoutEffect срабатывает на этапе компоновки до отрисовки. useEffect срабатывает как пассивный эффект после отрисовки.