В этой главе вы узнаете об устройстве кодовой базы React, используемых соглашениях и реализации.
\nЕсли вы хотите внести свой вклад в React, то мы надеемся, что эта глава вам поможет.
\nМы считаем, что вам не обязательно следовать этим соглашениям в ваших React-приложениях. Многие из этих соглашений существуют по историческим причинам и могут быть изменены со временем.
\nПосле клонирования репозитория React вы увидите папки верхнего уровня:
\npackages содержит метаданные (такие как package.json) и исходный код (подпапка src) для каждого пакета из репозитория React. Большая часть работы с кодом происходит в подпапках src внутри каждого пакета.fixtures содержит несколько небольших React-приложений для контрибьютеров.build содержит скомпилированную версию React. Этого каталога нет в репозитории, но он появится после того, как вы соберёте проект в первый раз.Документация расположена в отдельном репозитории.
\nСуществуют ещё несколько вспомогательных верхнеуровневых папок. Но вы, вероятно, не столкнётесь с ними при изменении кода.
\nУ нас нет отдельной верхнеуровневой папки с юнит тестами. Вместо этого, мы помещаем их в папку __tests__, расположенную рядом с тестируемыми файлами.
Например, тесты для setInnerHTML.js расположены в __tests__/setInnerHTML-test.js.
Предупреждения в React выводятся через console.error.
if (__DEV__) {\n console.error('Что-то не так.');\n}Предупреждения включены только в режиме разработки и полностью вырезаны из продакшена. Если вам необходимо запретить выполнение какого-либо кода, тогда используйте модуль invariant:
var invariant = require('invariant');\n\ninvariant(\n 2 + 2 === 4,\n 'Ты не пройдёшь!'\n);Если условие внутри invariant равно false, тогда выбрасывается исключение.
«Инварианты» — это всего лишь способ сказать: «Условие всегда истинно». Вы можете думать о них как об утверждениях (assertion).
\nВажно чтобы режимы разработки и продакшена имели похожее поведение, поэтому исключения выбрасываются в обоих режимах. Сообщения об ошибках в продакшене автоматически заменяются кодами ошибок, для того, чтобы избежать разрастания бандла.
\nВы можете использовать псевдоглобальную переменную __DEV__, чтобы блок кода присутствовал только в режиме разработки.
На этапе компиляции добавится проверка process.env.NODE_ENV !== 'production', определяющая, должен ли данный блок кода присутствовать в сборке CommonJS.
Выражение будет равно true в неминифицированной сборке, а в минифицированной будет вырезан весь блок вместе с if.
if (__DEV__) {\n // Этот код будет выполнен только в режиме разработки.\n}Недавно мы представили статический анализатор Flow. Файлы, помеченные аннотацией @flow в заголовке после лицензии, будут подвергнуты проверке типов.
Мы принимаем пулл реквесты на дополнение аннотаций Flow в уже существующий код. Вот пример кода:
\nReactRef.detachRefs = function(\n instance: ReactInstance,\n element: ReactElement | string | number | null | false,\n): void {\n // ...\n}Новый код, если это возможно, должен использовать Flow. Вы можете выполнить yarn flow, чтобы произвести проверку типов.
React является монолитным репозиторием. Он содержит множество отдельных пакетов, чтобы изменения были согласованными, а проблемы решались в одном месте.
\nЯдро включает в себя весь верхнеуровневый API, например:
\nReact.createElement()React.ComponentReact.ChildrenЯдро включает в себя только API необходимый для объявления компонентов. Оно не включает алгоритм согласования или какой-либо платформо-специфический код. Этот код находится в компонентах React DOM и React Native.
\nКод ядра расположен в папке packages/react. Он доступен в npm в виде пакета react. Соответствующая сборка для браузера экспортирует глобальную переменную React и называется react.js.
Изначально React создавался для DOM, но позже был адаптирован к другим платформам, таким как React Native. В этом разделе мы расскажем об используемых рендерерах.
\nРендереры превращают React дерево в платформо-специфический код.
\nОни расположены в каталоге packages/:
ReactDOM API и доступен как пакет react-dom из npm репозитория. Можно подключать как отдельный бандл react-dom.js, экспортирующий глобальную переменную ReactDOM.Мы начали поддерживать единственный неофициальный рендерер react-art, который раньше находился в отдельном GitHub-репозитории.
\n\nПримечание:
\nТехнически
\nreact-native-renderer— это очень тонкий слой, который учит React взаимодействовать с React Native. Платформо-специфический код, управляющий нативными представлениями, расположен в репозитории React Native вместе с его компонентами.
Даже очень непохожим рендерерам, таким как React DOM и React Native, необходимо разделять много логики. В частности, реализации алгоритма согласования должны быть настолько похожими, чтобы декларативный рендеринг, пользовательские компоненты, состояние, методы жизненного цикла и рефы работали одинаково между различными платформами.
\nВ качестве решения, различные рендереры имеют между собой общий код. В React мы называем эту часть «согласователь». Когда запланировано такое обновление, как setState(), согласователь вызывает render() в дереве компонентов и монтирует, обновляет либо размонтирует их.
Согласователи не являются отдельнымы пакетами, потому что не имеют открытого API. Вместо этого они используются исключительно такими рендерерами как React DOM и React Native.
\nСогласователь «Stack» — это реализация, которая использовалась в React 15 и более ранних версиях. Мы перестали его использовать, но задокументировали в следующией главе.
\nВ согласователе «Fiber» мы пытаемся исправить давно существующие ошибки и решить проблемы, появившиеся в согласователе Stack.
\nЕго основными целями являются:
\nrender().Вы можете узнать больше об архитектуре React Fiber здесь и здесь. Несмотря на то, что он включён в React 16, асинхронная функциональность по умолчанию не включена.
\nИсходный код расположен в папке packages/react-reconciler.
Для большей кроссбраузерной совместимости в React реализован слой, инкапсулирующий работу с нативными событиями. Его исходный код расположен в каталоге packages/react-dom/src/events.
В следующей главе вы познакомитесь с реализацией согласователя (версий React 15 и ранее) более подробно. Для нового согласователя мы ещё не писали документацию.
","frontmatter":{"title":"Устройство кодовой базы","next":"implementation-notes.html","prev":"how-to-contribute.html"},"fields":{"path":"content/docs/codebase-overview.md","slug":"docs/codebase-overview.html"}}},"pageContext":{"slug":"docs/codebase-overview.html"}},"staticQueryHashes":[]}