Исследуем код 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
На этом сегодня все, надеюсь я вас немного заинтересовала и вы захотите прочитать этот цикл статей полностью!
🤖 Чтобы не пропустить новые уроки подпишись на телеграм канал!