Компоненты, экземпляры и элементы

Компоненты — это часть пользовательского интерфейса — план или шаблон. Это функции, которые возвращают реагирующие элементы в формате JSX. Рассмотрим этот простой компонент:

export default const Button = () => {
  return (
    <button>Submit</button>
  )
}

React вызывает компонент <Button/> внутри себя всякий раз, когда мы используем его в нашем приложении.

Экземпляры состоят из компонентов со своим собственным состоянием, реквизитами и жизненным циклом. Термины экземпляра и компонента используются как взаимозаменяемые. С другой стороны, React использует метод createElement() «за кулисами» для преобразования кода JSX в элементы. В конце концов, элемент реагирования, который является объектом, содержит всю информацию, необходимую для создания элементов DOM.

Как на самом деле работает процесс преобразования реагирующих элементов в элементы пользовательского интерфейса?

Все начинается только с триггера для рендеринга наших компонентов. Как мы уже знаем, есть две ситуации, в которых запускается рендеринг. Во-первых, первоначальный рендеринг нашего приложения и, во-вторых, всякий раз, когда состояние обновляется в одном или нескольких компонентах.

Помните, что процесс рендеринга запускается для всего приложения. Кроме того, рендеринг незапускается немедленно, а запланирован на тот момент, когда движок JavaScript свободен.

Мы говорили о первой фазе и о том, какие триггеры рендерят. Теперь пришло время углубиться в этап рендеринга.

Этап рендеринга

Мы уже знаем, что React использует виртуальный DOM — дерево, состоящее из объектов из экземпляров компонентов — для отслеживания изменений. Почему бы нам не обновить сам DOM при каждом изменении состояния?

Потому что нам нужно учитывать, что: 1. Запись в DOM происходит медленно и 2. Обычно небольшую часть нашего приложения необходимо обновить.

Здесь на помощь приходит процесс примирения. При первоначальном рендеринге нашего приложения помимо VDOM будет создано дерево волокон, состоящее из элементов. Однако элементы Fiber не создаются заново при каждом рендеринге, они изменяемы и могут обновляться снова и снова.

Что делает это дерево Fiber интересным, так это то, что работа может выполняться асинхронно и задачи могут быть расставлены по приоритетам. В конце этого процесса, когда сравнение будет завершено, список обновлений DOM будет передан следующему процессу, который называется фазой фиксации.

Фаза фиксации

На этом этапе пакет React-dom возьмет на себя ответственность за вставку, удаление и обновление элементов. Сам React не касается DOM. React только выполняет рендеринг и не знает, куда пойдет результат рендеринга.

Фиксация — это синхронный процесс, и DOM обновляется за один раз, поскольку нежелательно показывать частичное обновление DOM. Когда фаза фиксации завершается, вновь созданное дерево волокон становится текущим деревом волокон для следующего цикла рендеринга.