⚛️ Как работает React и его алгоритм Reconciliation?

Первым делом выделим основные сущности алгоритма Reconciliation:

1. Current Tree - дерево (Virutal DOM), которое отображает текущее состояние приложения.
2. Rendering Environment (RE) - отдельная среда, которая преобразует Virutal DOM в набор операций (задач).
3. Work-in-Progress Tree - дерево (Virutal DOM), которое отображает обновленное состояние приложения.

Давайте разбираться, как вообще эти сущности работают и взаимодействуют между собой. Рассмотрим все подробно по шагам.

1. При монтировании у нас создается Current Tree.
2. Current Tree передается в Rendering Environment. RE в свою очередь преобразует дерево в набор задач и расставляет их по приоритетам.
3. Все задачи, которые создал RE, начинают выполняться по приоритету. После выполнения задач создается браузерный DOM и пользователь видит контент веб-страницы на экране.
4. После того как пользователь провзаимодействовал с веб-страницей (нажал кнопку, открыл модальное окно и т.п.), создается Work-in-Progress Tree, которое содержит обновленный Virtual DOM.
5. Происходит операция сравнения двух деревьев Current Tree и Work-in-Progress Tree. Все различия межу деревьями передаются в RE. Различия - это измененные, добавленные или удаленные узлы из Virtual DOM.
6. RE на основе различий двух деревьев создает задачи, которые опять же расставляет по приоритетам. Таким образом, React не обновляет полностью все дерево, а только те узлы, которые изменились.
7. Все заканчивается тем, что Work-in-Progress Tree становится Current Tree.

И дальше React снова ждет, когда появятся новые обновления в интерфейсе, чтобы проделать заново шаги 4-7. А интерфейс в React обновляется, когда изменяется state либо props компоненты.

Это базовое описание работы алгоритма Reconciliation. Конечно, можно углубиться в детали реализации виртуального DOM, но чаще всего данного объяснения на собеседовании хватает. В следующих постах будем более подробно разбирать Reconciliation и сам React.

P.S. У меня было одно собеседование, где интервьюер задал мне этот самый вопрос "Как работает React?". Я ему рассказал все примерно так же, как описано в этом посте. Он сказал, что вопросов задавать больше не будет, так как видит, что я хорошо шарю за React. В итоге собеседование длилось минут 15 🙃