Итак ,я попытался нарисовать схему этапа Reconciliation и очень абстрактно этапа Commit.

Для примера я взял простую структуру приложения ,которая состоит из:

root (контейнер приложения)

-- App (компонент)

---- Button (компонент)

------ ButtonElement (HTMLButtonElement)

-------- TextNode (текстовый узел)

---- Text (компонент)

------ TextNode (текстовый узел)

Для простоты представим ,что у компонента Button вызвался setState ,что положило начало процессу реконсиляции (Reconciliation).

React знает ,что setState был вызван именно на компоненте Button ,а потому он создает временное дерево ReactElement для него и всех его дочерних узлов ,в нашем случае это сам Button, ButtonElement и TextNode. Его создает React для того ,чтобы в последствии сравнить с соответствующими Fiber из текущего дерева Fiber. Формально вызываются render у каждого такого компонента или элемента ,чтобы получить новое состояние для ReactElement на основе пропсов и стейта.

Этот процесс на схеме обозначен блоком New ReactElementTree. Мы можем заметить ,что было создано дерево не для всего приложения ,а только для элемента и его потомков ,на котором был вызван setState.

Далее React сравнивает состояния узлов из временного дерева ReactElement с состоянием ,содержащимся в Fiber для этих узлов. На данный момент сравнения происходят с Fiber из текущего дерева Fiber. Если на основе Diff состояний React находит разницу ,то создает новый Fiber для этого элемента и кладет его в рабочее дерево Fiber.

На схеме я обозначил этот процесс стрелкой create new ,соединяющую файберы из колонок current и workInProgress.

Если состояние ReactElement не потерпело изменений ,то новый Fiber для этого узла не создается ,а переиспользуется из текущего дерева Fiber. То есть передается по ссылке.

Когда дерево workInProgress или рабочее дерево Fiber было заполнено ,временное дерево ReactElement удаляется ,тк в дальнейшей работе уже не пригодится. Я обозначил это переходом в состояние оранжевого цвета. Далее на схеме этот цвет будет ассоциироваться с удалением ,зачисткой.

Итак ,когда дерево workInProgress сформировано ,в работу вступает механизм React Scheduler ,который расставляет приоритеты для задач Fiber и формирует очередь задач на выполнение. Сформированная очередь задач попадает в фазу commit ,в которой задачи выполняются в порядке выставленных приоритетов. В результате производится либо обновление DOM ,либо вызов эффектов реакта. В качестве примера я взял эффект useEffect ,который выполняется после обновления DOM ,следовательно приориет этой задачи ниже ,чем у задачи обновления DOM - я показал это на схеме.

Сейчас если перенести взгляд на верхнюю часть схемы ,можно увидеть ,что дерево current начинает смотреть на workInProgress. Это тот самый процесс ,когда FiberRoot начинает считать текущим деревом дерево workInProgress ,а workInProgress дерево удаляется.

Здесь стоит пояснить некоторые обозначения на схеме.

Элемент Root представляет собой контейнер приложения и имеет связь с FiberRoot. Объект FiberRoot содержит в себе свойства current и workInProgress ,которые представляют ссылки на соответствующие деревья Fiber. Их я также обозначил на схеме ,чтобы выразить изменение их состояния в процессе одного цикла обновлений.

Каждый элемент в дереве также имеет связь с Fiber ,это показано скругленным прямоугольником со стрелкой отношения. Элементы ,в которых произошли изменения (props или состояния) ,я пометил зеленым цветом. Fiber ,которые должны создаться заново я пометил синим цветом. Все что не имеет цвета является неподвергшимся изменениям объектом. Однако блок current под конец цикла обновлений все-таки меняется ,но я не стал его заркашивать ,чтобы не запутаться.

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