React
October 10, 2022

Исследуем код React (часть 1)

Я всегда воспринимала React как черный ящик, который берет JSX и выводит что-то на экран, не задумываясь о том, как он это делает.

Конечно, я знаю то-то и то-то о виртуальном DOM и алгоритме свертки и т.д. По крайней мере, в теории.

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

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

Прежде чем вы продолжите чтение, я должна отметить, что это не должно быть исчерпывающим обзором того, как React работает под капотом. На самом деле, некоторые из моих предположений на этот счет, вероятно, окажутся неверными

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

Ну что же, давайте начнем!

И первое что мы видим... Монорепа

Я открыла репозиторий ректа, ожидая найти каталог src. Вместо этого я увидела один каталог с названием packages, сразу поняв, что передо мной монорепа.

Если кто в танке, то монорепа - это один репозиторий, в котором хранится несколько различных приложений или библиотек.

Репозиторий React содержит 30+ пакетов, включая react, react-dom, react-server, react-devtools и многие другие.

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

У меня никогда не было возможности поговорить о своих обидах на монорепы, поэтому я могу воспользоваться этой возможностью.

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

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

Однако это не критика архитектуры React. Я уверена, что мейнтейнеры разобрались в своих процессах.

С чего бы начать?

Чтение незнакомого кода вызывает недоумение. Тем более, если вы не знаете никого, кто мог бы вам в этом помочь. Поэтому мы должны начать с чего-то, чтобы понять кодовую базу и опираться на нее, обращая внимание на паттерны, которые мы обнаруживаем по пути.

Независимо от программного обеспечения, при исследовании новой для меня кодовой базы, я всегда беру один из его публичных API и начинаю разбираться с него.

Что такое такое публичные API React?

Например хуки, такие как useState и useEffect, являются частью API. Но, начав с них, мы не сможем понять, что происходит, поскольку у нас не будет контекста того, как работают компоненты или рендеринг.

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

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(container);
root.render(element);

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

Возможно, вы заметили, что функция, которую мы будем изучать, не является частью основной библиотеки. Она является частью react-dom, которая представляет собой привязку браузера к React, соединяющую его с DOM.


В ходе этого цикла статей мы с вами разберемся как устроена эта привязка, а так же рассмотрим следующие элементы исходного кода React:

  • Как происходит подключение к Reconciler
  • Что скрывает в себе Component
  • Как именно настроено взаимодействие между Renderer и Reconciler
  • Посмотрим на основные методы Renderer

На этом сегодня все, надеюсь я вас немного заинтересовала и вы захотите прочитать этот цикл статей полностью!

🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!