в предыдущей статье«Анализ исходного кода React (1): внедрение и установка компонентов»В разделе мы объяснили реализацию и монтирование компонентов React. Теперь давайте вместе исследуем жизненный цикл компонентов.
Мы уже знаем, что жизненный цикл компонента запускается только после запуска процесса монтирования, генерирующегоReactElementТип объекта js путем анализа информации, содержащейся в объекте компонента, получения соответствующей информации HTML, вставки ее в указанный контейнер DOM и, наконец, завершения рендеринга представления. Так как же в этом процессе запускается жизненный цикл компонента?
По сути, изучить цикл декларирования компонентов — значит изучить процесс монтажа компонентов в глубину.
жизненный цикл компонента
В конце предыдущей статьи мы знаемReactDOM.render()Метод генерирует четыре различных типа инкапсулированных компонентов внутри с помощью фабричного метода в соответствии с входящими параметрами:
- ReactEmptyComponent
- ReactTextComponent
- ReactDOMComponent
- ReactCompositeComponent
При выполнении процесса монтирования путем выполнения внутреннегоmountComponentМетод запускает жизненный цикл, но, по-видимому, жизненный цикл существует только в пользовательских компонентах React, т.е.ReactCompositeComponent. Поскольку остальные три компонента не имеют жизненного цикла, давайте сначала проанализируем три относительно простых внутренних компонента, не имеющих жизненного цикла.
1.ReactEmptyComponent
пройти черезReactEmptyComponent.create()создание метода, который, наконец, вызываетReactDOMEmptyComponentметод, посмотрите на исходный код:
Поскольку компонент пустой, почти все параметры имеют значение null, и это не имеет ничего общего с жизненным циклом, а только с монтированием и выгрузкой компонента. в ключевом методеmountComponent, мы видим, что окончательный результат имеет вид<!-->HTML, то есть пустой, поэтому вставка реального DOM тоже пуста.
2.ReactTextComponent
пройти черезReactHostComponent.createInstanceForText()создание метода, давайте посмотрим непосредственноmountComponentТолько что:
ReactDOMTextComponentв сравнении сReactDOMEmptyComponentОбработка немного сложнее, но логика примерно такая же.escapeTextContentForBrowserПараметры проверяются на наличие пробелов внутри метода и, наконец, с помощью простого' '+参数Метод преобразует параметр в строку и возвращает ее.
3.ReactDOMComponent
пройти черезReactHostComponent.createInternalComponent()Способ создания такого же взгляда на нас напрямуюmountComponentПросто хорошо:
Поскольку элемент dom также не имеет жизненного цикла,ReactDOMComponentк входящемуdiv,spanподождите, пока метка не пройдетswitchПроцесс в основном такой же, как и для двух вышеупомянутых типов компонентов, за исключением того, что выполняются идентификация и обработка.
4.ReactCompositeComponent
Пользовательские компоненты находятся в центре внимания компонентов React, черезReactCompositeComponentWrapper()создание метода, окончательный вызовReactCompositeComponentMixin.mountComponentметод для создания HTML для компонента. Поскольку эта функция очень длинная, заинтересованным читателям следует перейти кReactCompositeComponent.jsЧитайте исходный код, здесь мы приводим логику функции прямо с легендой:
Исходя из вышеизложенного, видно, что целью выполнения жизненного цикла является анализReactElementПолучить HTML. Исходя из этого, мы обновляем сводную таблицу четырех типов компонентов в предыдущей статье:
nextElement |
фактические параметры | результат |
|---|---|---|
null/false
|
нулевой | СоздайтеReactDOMEmptyComponentкомпоненты |
object && type === string
|
виртуальный DOM | СоздайтеReactDOMComponentкомпоненты |
object && type !== string
|
Реагировать компоненты | СоздайтеReactCompositeComponentкомпоненты |
string |
нить | СоздайтеReactDOMTextComponentкомпоненты |
number |
количество | СоздайтеReactDOMTextComponentкомпоненты |
Наконец, на основе ментальной карты, приведенной в конце первой статьи, уточняем детали: (щелкните, чтобы просмотреть увеличенное изображение)
рассмотрение:
«Анализ исходного кода React (1): внедрение и установка компонентов»
«Анализ исходного кода React (3): подробная транзакция и очередь обновлений»
«Анализ исходного кода React (4): система событий»
Контактный адрес электронной почты: sssyoki@foxmail.com