Как работает React (1) Первый рендеринг

внешний интерфейс JavaScript React.js

Введение

     В этой статье будет использоваться простой пример в сочетании с исходным кодом React (v 16.4.2), чтобы проиллюстрировать, как работает React, и помочь читателям понять взаимосвязь между ReactElement и Fiber, а также роль Fiber в каждом процессе. Прочитав эту статью, вы сможете легче понять исходный код React. Первоначальный план включает в себя следующие статьи:

  1. первый рендер
  2. механизм события
  3. процесс обновления
  4. механизм планирования

Во-вторых, анализ основного типа

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

1. ReactElement

   Когда мы пишем компоненты React, мы обычно используемJSXдля описания компонентов.<p></p>После того, как эта запись будет преобразована Babel, она станет иметь вид React.createElement(type, props, children). И в нашем примере,typeБудет два вида:function,string.functionобычно означаетReactComponentизconstructorили функциональные компонентыfunction,а такжеstringтипHTMLЭтикетка.

  Этот метод в конечном итоге вернет ReactElement , который является обычным Object , не созданным через класс, просто взгляните на него.Основные члены следующие:

key type desc
?typeof Symbol|Number Идентификатор типа объекта, используемый для определения того, является ли текущий объект определенным типом ReactElement.
type Function|String|Symbol|Number|Object Если текущий ReactElement является ReactComponent, то это будет его соответствующий Constructor, в то время как обычные теги HTML обычно представляют собой String.
props Object Все свойства в ReactElement, включая специальные дочерние свойства

2. ReactRoot

   в настоящее время находится внутри ReactDom.js, который можно понимать как точку входа в рендеринг React. мы называемReactDom.renderПосле этого ядром является создание ReactRoot, а затем вызов экземпляра ReactRoot дляrenderметод, который входит в процесс рендеринга.

key type desc
render Function метод входа в рендеринг
_internalRoot FiberRoot Корень FiberTree, созданный из текущего DOMContainer.

3. FiberRoot

  FiberRoot — это объект, который является основным корневым объектом для последующей инициализации и обновления. Основные члены следующие:

key type desc
current (HostRoot)FiberNode Указывает на корень текущего завершенного дерева волокон.
containerInfo DOMContainer DOM-контейнер React, который отображает весь React в этот DOM.
finishedWork (HostRoot)FiberNode|null Указывает на корень дерева волокон, подготовка к которому завершена.

current и finishWork являются узлами FiberNode (HostRoot) Почему? Сначала продай, а потом объясню.

4. FiberNode

   После React 16 Fiber Reconciler используется в качестве планировщика React по умолчанию, а основной структурой данных является дерево узлов, состоящее из FiberNode. Сначала посетите его основных членов:

key type desc
связанный с экземпляром --- ---
tag Number Тип FiberNode, который можно найти в packages/shared/ReactTypeOfWork.js. В текущей демонстрации статьи вы можете увидеть ClassComponent, HostRoot, HostComponent и HostText.
type Function|String|Symbol|Number|Object В соответствии с ReactElement
stateNode FiberRoot|DomElement|ReactComponentInstance FiberNode будет связывать некоторые другие объекты через stateNode, такие как экземпляры Dom, FiberRoot, ReactComponent, соответствующие FiberNode.
Процесс прохождения волокна, связанный с
return FiberNode|null Представляет родительский узел FiberNode
child FiberNode|null Представляет первый дочерний узел FiberNode.
sibling FiberNode|null Указывает ближайший соседний узел FiberNode того же уровня.
alternate FiberNode|null Алгоритм планирования Fiber использует алгоритм двойного буферного пула.Все узлы под FiberRoot будут пытаться создать свои собственные «зеркала» во время процесса алгоритма, который будет объяснен позже.
связанные с данными
pendingProps Object Указывает новый реквизит
memoizedProps Object Представляет новые реквизиты после обработки всех процессов.
memoizedState Object Представляет новое состояние после обработки всех процессов
Описание побочных эффектов
updateQueue UpdateQueue Обновите очередь. В очереди содержится статус предстоящего изменения. Подробности будут объяснены позже.
effectTag Number Шестнадцатеричные числа можно понимать как идентификацию n действий через поле, таких как размещение, обновление, удаление, обратный вызов... Поэтому я вижу много &= в исходном коде.
firstEffect FiberNode|null Относится к процессу обхода операции побочного эффекта. Ссылка на первый узел FiberNode побочного эффекта, который необходимо обработать в текущем узле.
nextEffect FiberNode|null Ссылка на FiberNode, представляющий следующий обрабатываемый побочный эффект.
lastEffect FiberNode|null Ссылка на последний побочный эффект FiberNode, который будет обработан.

5. Update

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

key type desc
tag Number В настоящее время их 0~3, а именно UpdateState, ReplaceState, ForceUpdate, CaptureUpdate
payload Function|Object Указывает содержимое данных, соответствующее этому обновлению.
callback Function Указывает на обновленную функцию обратного вызова. Если этот обратный вызов имеет значение, он будет привязан к текущему объекту Update в списке побочных эффектов UpdateQueue.
next Update Обновления в UpdateQueue последовательно соединены следующим, что указывает на следующий объект Update.

6. UpdateQueue

   Представляет набор побочных эффектов (в основном, обратный вызов) текущего обновления узла в узле FiberNode. В следующей структуре часть CapturedUpdate опущена.

key type desc
baseState Object Указывает базовое состояние перед обновлением
firstUpdate Update Первая ссылка на объект обновления, в целом представляет собой односвязный список
lastUpdate Update последняя ссылка на объект обновления
firstEffect Update Ссылка на первый объект Update, содержащий побочный эффект (обратный вызов).
lastEffect Update Ссылка на последний объект Update, содержащий побочный эффект (обратный вызов).

3. Примеры кода

   Это описание процесса, используйте следующий исходный код для анализа


//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));



//App.js
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      msg:'init',
    };
  }
  render() {
    return (
      <div className="App">
        <p className="App-intro">
          To get started, edit <code>{this.state.msg}</code> and save to reload.
        </p>
        <button onClick={() => {
          this.setState({msg: 'clicked'});
        }}>hehe
        </button>
      </div>
    );
  }

}

export default App;

4. Алгоритм планирования рендеринга — этап подготовки

отReactDom.renderМетод запускается и официально входит в стадию подготовки к рендерингу.

1. Инициализируйте базовый узел

   Создайте ReactRoot, FiberRoot, (HostRoot)FiberNode и установите их связь с DOMContainer.

2. Инициализировать(HostRoot)FiberNodeизUpdateQueue

   по телефонуReactRoot.render, затем введитеpackages/react-reconciler/src/ReactFiberReconciler.jsизupdateContainer -> updateContainerAtExpirationTime -> scheduleRootUpdateСерия вызовов методов, создающих Update для этой инициализации, помещающих<App />Этот ReactElement как элемент обновленияpayload.elementЗначение , а затем поместите обновление в updateQueue (HostRoot)FiberNode.

тогда позвониscheduleWork -> performSyncWork -> performWork -> performWorkOnRoot, период в основном предназначен для извлечения (HostFiber) FiberNode, который должен быть инициализирован в настоящее время, а затем официально перейти к этапу выполнения алгоритма.

5. Алгоритм планирования рендеринга — этап выполнения

   Поскольку это время инициализации, его нужно вызватьpackages/react-reconciler/src/ReactFiberScheduler.jsизrenderRootметод для создания полного дерева FiberNodefinishedWork.

1. Создайте (HostRoot) FiberNodeworkInProgress,Прямо сейчасcurrent.alternate.

   Во всем алгоритмическом процессе главное — пройти узлы FiberNode. В алгоритме есть две роли: одна — представлять исходную форму текущего узла.currentузел, другой - пересчитать на основе текущего узлаworkInProgress/alternateузел. Два экземпляра объекта независимы и проходят друг перед другомalternateСвойства ссылаются друг на друга. Многие свойства объектов先复制再重建из.

Создайте диаграмму результатов в первый раз:

   Основная идея этого подхода заключается в双缓池技术(double buffering pooling technique), потому что, если вам нужно сделать diff, у вас должно быть как минимум два дерева для сравнения. Таким образом, общее количество деревьев может быть ограничено до2, узлы и атрибуты узлов создаются лениво, чтобы свести к минимуму рост использования памяти из-за процесса алгоритма. В следующей статье о процессе обновления вы узнаете об этом双缓冲Как играть.

2. Цикл выполнения работы

Схематический код выглядит следующим образом:

nextUnitOfWork = createWorkInProgress(
  nextRoot.current,
  null,
  nextRenderExpirationTime,
);
....

while (nextUnitOfWork !== null) {
  nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
}

Только что созданный FiberNode используется какnextUnitOfWork, а затем войти в рабочий цикл. Как видно из приведенного выше кода, это типичный метод записи рекурсивного цикла. Запись цикла таким способом аналогична традиционному рекурсивному способу записи цикла, избегая непрерывного наложения стека вызовов и переполнения стека вызовов.SchedulerВспомогательная переменная кода может реализовать эффект прекращения обхода в любой момент и возобновления в любой момент.

мы идем дальшеperformUnitOfWorkможно увидеть аналогичный кадр кода:

const current = workInProgress.alternate;
//...
next = beginWork(current, workInProgress, nextRenderExpirationTime);
//...
if (next === null) {
    next = completeUnitOfWork(workInProgress);
}
//...
return next;

Отсюда видно, что на узле workInProgress выполняется какая-то обработка, а затем она будет пропущена через一定的遍历规则вернутьnext,еслиnextЕсли он не пустой, вернуться к следующемуperformUnitOfWork, иначе введитеcompleteUnitOfWork.

3. beginWork

  Цель каждой работы в основном состоит в том, чтобы иметь дело сworkInProgress. здесь черезworkInProgress.tagОпределите тип текущего узла FiberNode, а затем выполните соответствующую обработку обновления. Далее описываются два типа обработки FiberNode, которые являются более сложными в нашем примере, а затем объясняются более важные из них отдельно.processUpdateQueueтак же какreconcileChildrenОбработать.

3.1 HostRoot - updateHostRoot

  HostRoot, то есть (HostRoot)FiberNode, часто упоминаемый в тексте, указывает, что это FiberNode типа HostRoot, который передается в кодеFiberRoot.tagВыражать.

   Как упоминалось ранее, во время начальной инициализации (HostRoot) FiberNode инициализировал свойupdateQueue, который содержит дочерние узлы для обработки. Вот два действия:

  • Обработать очередь обновлений и получить новое состояние — метод processUpdateQueue
  • Создайте или обновите FiberNodechild, получить входной параметр следующего рабочего цикла (тоже FiberNode) — метод ChildReconciler

   Детали этих двух функций относятся к более общей части, которая будет объяснена отдельно позже.

3.2 ClassComponent - updateClassComponent

  ClassComponent, то есть Компонент, который мы написали, когда писали код React, который является примером в примереApp.

3.2.1 СоздатьReactComponentстадия экземпляра

   Для узлов, которые не были инициализированы, этот метод в основном черезFiberNode.typeКонструктор ReactComponent для создания экземпляров ReactComponent и создания отношений с FiberNode s.

(ClassComponent) Схематическая диаграмма взаимосвязи между FiberNode и ReactComponent:

   После инициализации он войдет вmountпроцесса, то есть поставить КомпонентrenderБыл вызван метод предыдущего цикла. период,stateМожет быть изменен следующими процессами:

  • вызов getDerivedStateFromProps
  • вызов componentWillMount --устарело
  • Обработайте processUpdateQueue, вызванный обновлением, созданным вышеуказанным процессом.
3.2.2 Этап завершения — создание дочернего узла FiberNode

   После инициализации экземпляра компонента, описанного выше, путем вызова экземпляраrenderПолучите дочерний элемент ReactElement и создайте все соответствующие дочерние узлы FiberNode. в конце концовworkInProgress.childУказывает на первый дочерний узел FiberNode.

3.4 Обработка очереди обновления узла — метод processUpdateQueue

   Прежде чем объяснять процесс, давайте рассмотрим структуру данных updateQueue:

   Как видно из приведенной выше структуры, UpdateQueue — это контейнер, в котором хранится весь односвязный список обновлений. BaseState внутри представляет собой исходное состояние перед обновлением, и после прохождения каждого связанного списка Update в конечном итоге будет получено новое baseState.

   Для обработки одного обновления оно в основном основано наUpdate.tagразличать.

  • ReplaceState: верните сюда полезные данные напрямую. Если полезная нагрузка является функцией, используйте ее возвращаемое значение в качестве нового состояния.
  • CaptureUpdate: простоworkInProgress.effectTagустановить, чтобы очиститьShouldCaptureпометить бит, увеличитьDidCaptureбит флага.
  • UpdateState: если полезная нагрузка является обычным объектом, обрабатывайте ее как новое состояние. Если полезная нагрузка является функцией, возвращаемое значение, полученное при выполнении функции, используется в качестве нового состояния. Если новое состояние не пусто, сливается с исходным состоянием и возвращает新对象.
  • ForceUpdate: просто установкаhasForceUpdateЕсли true, возвращает исходное состояние.

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

3.5 Обработка дочернего узла FiberNode — метод reconcileChildren

  После обработки самого узла workInProgress он пройдетprops.childrenилиinstance.render方法Получите дочерний элемент ReactElement. Дочерний элемент ReactElement может быть对象,数组,字符串,迭代器, для различных видов обработки.

  • Ниже через ClassComponent и его数组类型 childсцена для объяснения процесса создания и ассоциации дочернего узла FiberNode (reconcileChildrenArray方法):

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

   перед обходомrenderМассив ReactElement, сгенерированный методом, генерирует FiberNode во взаимно однозначном соответствии. FiberNode имеетreturnFiberсвойства иsiblingсвойства, указывающие на его родительский узел FiberNode и ближайший соседний узел FiberNode соответственно. Эта структура данных связана с последующим процессом обхода.

Теперь созданная структура дерева Fibernode выглядит следующим образом:

  Двое на картинке(HostComponent)FiberNodeЭто только что сгенерированный дочерний узел FiberNode, то есть в исходном коде.<p>...</p>а также<button>...</button>. Последнее, что возвращает этот метод, — это первый дочерний узел FiberNode, созданный таким образом.(ClassComponent)FiberNode.childОтношение к первому дочернему узлу FiberNode.

   В это время уберите код, который вы только что видели:

const current = workInProgress.alternate;
//...
next = beginWork(current, workInProgress, nextRenderExpirationTime);
//...
if (next === null) {
    next = completeUnitOfWork(workInProgress);
}
//...
return next;

   означает, что только что вернувшийся ребенок будет считатьсяnextВведите следующий рабочий цикл. Таким образом, вы получите следующее дерево FiberNode:

   После создания этого дерева возвращается (HostText)FiberNode в левом нижнем углу. и повторно введитеbeginWorkПосле метода, поскольку этот FiberNode не имеет дочернего элемента, в соответствии с приведенной выше логикой кода, он войдетcompleteUnitOfWorkметод.

Примечание. Хотя окончательная форма дерева узлов волокна в этом примере выглядит так, на самом деле алгоритм заключается в том, чтобы сначала пройти глубину, а затем пройти соседние одноуровневые узлы после достижения конечного узла. Если у родственного узла есть дочерние элементы, он будет продолжать расширяться.

4. completeUnitOfWork

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

4.1 Создайте DomElement и обработайте отношения привязки дочернего DomElement

 completeWorkметод, согласноworkInProgress.tagЧтобы различать разные действия, для дальнейшего анализа выбираются следующие два более важных:

4.1.1 HostText

упомянутый ранее,FiberNode.stateNodeМожет использоваться для хранения экземпляров DomElement. Во время инициализации stateNode имеет значение null, поэтому он пройдетdocument.createTextNodeСоздайте Text DomElement, содержимое узлаworkInProgress.memoizedProps. Наконец, по__reactInternalInstance$[randomKey]устанавливает соединение со своим собственным FiberNode.

4.1.2 HostComponent

   В этом примере, после обработки вышеприведенного HostText, алгоритм планирования будет искать одноуровневый узел текущего узла для обработки, поэтому введитеHostComponentпоток обработки.

   Из-за текущего процесса инициализации обработка относительно проста, как раз в соответствии сFiberNode.tag(текущее значениеcode) для создания DomElement, т.е.document.createElementДля создания узла. затем пройти__reactInternalInstance$[randomKey]атрибут устанавливает соединение со своим собственным FiberNode; через__reactEventHandlers$[randomKey]установить связь с реквизитом.

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

   сопровождение, черезsetInitialPropertiesметод инициализирует свойства DomElement и<code>Содержание узла, стиль,class, обработчик событий и т. д. также сохраняются в это время.

   Теперь все дерево FiberNode выглядит следующим образом:

   После нескольких циклов получается следующее дерево FiberNode:

После    вернитесь к узлу FiberNode (HostComponent), указанному красной стрелкой, и проанализируйте поток обработки дочернего узла, который был пропущен ранее.

   После создания текущего DomElement введитеappendAllChildrenМетод добавляет дочерний узел к текущему элементу DomElement. Из вышеописанного процесса можно узнать, чтоworkInProgress.child -> workInProgress.child.sibling -> workInProgress.child.sibling.sibling ....Найдите все дочерние узлы, и stateNode каждого узла является соответствующим DomElement, поэтому, проходя таким образом, все DomElements могут быть подключены к родительскому DomElement.

  Наконец, все узлы FiberNode, связанные с DomElement, обрабатываются, что приводит к следующему полному представлению узла FiberNode:

4.2 Повесить эффект текущего узла на конец эффекта returnFiber

   Как описано в предыдущем объяснении базовой структуры данных, каждый FiberNode имеет свойства firstEffect и lastEffect, указывающие наEffect(副作用) FiberNodeсвязанный список. После обработки текущего узла и возвращения к родительскому узлу, подключите текущую цепочку к returnFiber. Наконец, в(HostRoot)FiberNode.firstEffectСуществует связанный список FiberNode со всеми смонтированными в нем побочными эффектами текущего дерева FiberNode.

5. Окончание этапа выполнения

   После прохождения всех предыдущих процессов, наконец, (HostRoot)FiberNode также обрабатывается, возвращает (HostRoot)FiberNode и, наконец, какfinishedWorkвернуться кperformWorkOnRoot, а затем перейти к следующему этапу.

6. Алгоритм планирования рендеринга — этап отправки

   Так называемая фаза фиксации — это фаза, на которой фактически выполняются некоторые периодические функции и операции Dom.

   Здесь также есть обход связанного списка, и обход представляет собой связанный список эффектов, сгенерированный на предыдущем этапе. Перед обходом, из-за инициализации, из-за(HostRoot)FiberNode.effectTagдляCallback(обратный вызов инициализации)), сначала поместит готовую работу в конец связанного списка. Структура выглядит следующим образом:

После того, как каждая часть отправлена, сбросьте узел обхода наfinishedWork.firstEffect.

1. Зафиксировать операцию до того, как нода будет смонтирована (mount)

  В настоящее время этот процесс обрабатывает только те, которые принадлежат ReactComponentgetSnapshotBeforeUpdateметод.   

2. Побочные эффекты (вставка, изменение, удаление) собственного узла ( Host ) на стороне фиксации

   После перехода к узлу он решит, какую операцию выполнить в соответствии с effectTag узла.Операция включает в себя插入( Placement ),修改( Update ),删除( Deletion ).

   Поскольку в настоящее время это первый рендеринг, он войдет в процесс размещения, а остальная часть процесса будет объяснена позже в разделе «Как работает React (3) Процесс обновления».

2.1 Процесс введения (размещение)

  Чтобы выполнить операцию вставки, необходимо сначала найти два элемента: родительский элемент DomElement и дочерний элемент DomElement.

2.1.1 Найдите ближайший родительский элемент DomElement относительно текущего узла FiberNode

пройти черезFiberNode.returnПродолжайте искать, найдите ближайший (HostComponent) FiberNode, (HostRoot) FiberNode, (HostPortal) FiberNode, а затем передайте(HostComponent)FiberNode.stateNode,(HostRoot)FiberNode.stateNode.containerInfo,(HostPortal)FiberNode.stateNode.containerInfoВы можете получить соответствующий экземпляр DomElement.   

2.1.2 Найдите все ближайшие FiberNode относительно текущего游离子 DomElement

   На самом деле цель состоит в том, чтобы найти все соседние (HostComponent) FiberNode и (HostText) FiberNode под текущим FiberNode, а затем получить дочерний элемент DomElement для вставки через свойство stateNode.

так называемый所有邻近的, что можно понять из этой картинки:

   Красная рамка на картинкеFiberNode.stateNode, который является дочерним элементом DomElement, добавляемым к родительскому элементу DomElement.

Порядок обхода    примерно такой же, как и в предыдущем поколении FiberNode Tree:

а) Посетите дочерний узел, пока не будет найденFiberNode.typeДля узла HostComponent или HostRoot получите соответствующий stateNode и добавьте его к родительскому элементу DomElement.

б) Найдите родственный узел, если он есть, посетите родственный узел и верните a).

c) Если узла-близнеца нет, посетить возвращаемый узел, а если return не является корневым узлом входного параметра текущего алгоритма, вернуть a).

г) Выход, если он возвращается к корневому узлу.

3. Измените идентификатор workInProgress/alternate/finishedWork.

   Хотя это короткая строка кода, она очень важна, поэтому помечена отдельно:

    root.current = finishedWork;

   Это означает, что после обработки побочного эффекта DomElement предыдущий缓冲树Задача была завершена, передана в качестве основной и стала следующим процессом пересмотра.current. Давайте посмотрим на всю картину:

4. Зафиксировать операции загрузки и вызова жизненного цикла после изменений

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

4.1 ClassComponent

   Если у effectTag текущего узла есть флаг Update, вам необходимо выполнить метод жизненного цикла соответствующего экземпляра. На этапе инициализации, поскольку текущий компонент визуализируется впервые, он должен выполнитьcomponentDidMount, иначе следует выполнитьcomponentDidUpdate.

   Как упоминалось ранее, в updateQueue также есть список эффектов. Он хранит обратные вызовы предыдущих обновлений, обычно полученные изsetStateвторой параметр , илиReactDom.renderизcallback. После выполнения вышеуказанной функции жизненного цикла начните обход списка эффектов и один раз выполните обратный вызов.

4.2 HostRoot

Операция    аналогична второй части обработки ClassComponent.

4.3 HostComponent

  Эта часть в основном касается фокуса первого загруженного HostComponent, если компонентautoFocusЭтот реквизит будет привлекать внимание.      

7. Резюме

  В этой статье в основном говорится оReactDom.renderВнутренний рабочий процесс, который описывает внутренний процесс первоначального рендеринга React:

  1. Создайте базовые объекты: ReactRoot, FiberRoot, (HostRoot)FiberNode.
  2. Создайте образ HostRoot и инициализируйте его через объект изображения
  3. Процесс инициализации управляет созданием дерева FiberNode с помощью ReactElement.
  4. Родительско-дочерний узел FiberNode черезchild,returnсоединять
  5. Brother Fibernode By.siblingсоединять
  6. Процесс создания дерева FiberNode, сначала глубина, создание одноуровневых узлов после окончания
  7. Как только конечный узел будет достигнут, начните создавать соответствующий экземпляр FiberNode, например, соответствующий экземпляр DomElement, экземпляр ReactComponent, и передайте экземпляр черезFiberNode.stateNodeСоздайте ассоциацию.
  8. Если экземпляр ReactComponent в настоящее время создается, вызов будет вызванgetDerivedStateFromProps,componentWillMountметод
  9. После создания DomElement, если в дочернем узле FiberNode есть созданный DomElement, немедленно добавьте его к вновь созданному DomElement.
  10. После построения всего дерева FiberNode также создается соответствующее дерево DomElement, а затем начинается процесс отправки.
  11. В процессе создания Дерева ДомЭлемент текущий副作用Продолжайте идти вверх, на этапе отправки этот тег будет найден, и только что созданное дерево DomElement будет загружено в контейнер DomElement.
  12. 双缓冲Роли двух деревьев FiberNode Tree меняются местами, и исходный workInProgress становится положительным.
  13. Выполнить метод жизненного цикла после загрузки соответствующего компонента ReactComponent.componentDidMount
  14. Другие обратные вызовы, обработка автофокуса

 В следующей статье будет описан механизм событий React (но он, как говорят, рефакторен), надеюсь, я не брошу фармить.

После написания первой статьи версия React достигла 16.5.0 …

Категории