{"componentChunkName":"component---src-templates-docs-js","path":"/docs/implementation-notes.html","result":{"data":{"markdownRemark":{"html":"

В этой главе собраны примеры из реализации согласователя Stack.

\n

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

\n

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

\n

Согласователь Stack использовался в React 15 и более ранних версиях. Его код находится в каталоге src/renderers/shared/stack/reconciler.

\n

Видео: сборка React с нуля

\n

Paul O’Shannessy рассказал в своём докладе как собрать React с нуля, используя материал из этой главы.

\n

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

\n

Введение

\n

Согласователь не имеет открытого API. Рендереры, такие как React DOM и React Native, используются, чтобы эффективно обновлять пользовательские UI-компоненты.

\n

Монтирование как рекурсивный процесс

\n

Давайте рассмотрим, как компонент монтируется в первый раз.

\n
const root = ReactDOM.createRoot(rootEl);\nroot.render(<App />);
\n

root.render передаст <App /> в согласователь. Запомните, что <App /> — это React-элемент, т. е. описание того, что нужно отрендерить. Вы можете представлять его как просто объект.

\n
console.log(<App />);\n// { type: App, props: {} }
\n

Согласователь будет проверять, чем является App: классом или функцией.

\n

Если App — функция, согласователь вызовет App(props), чтобы получить элемент, который нужно отрендерить.

\n

Если App — класс, согласователь создаст экземпляр App с помощью new App(props), вызовет метод жизненного цикла componentWillMount(), а затем вызовет render(), чтобы получить элемент, который нужно отрендерить.

\n

В любом случае, согласователь изучит элемент App, чтобы узнать, что нужно отрендерить.

\n

Этот процесс рекурсивен. App может рендерить <Greeting />, Greeting — <Button />, и т. д. Согласователь будет рекурсивно погружаться в пользовательские компоненты, пока не узнает, что каждый компонент должен рендерить.

\n

Рассмотрим этот процесс с помощью псевдокода:

\n
function isClass(type) {\n  // Подклассы React.Component имеют соответствующий флаг\n  return (\n    Boolean(type.prototype) &&\n    Boolean(type.prototype.isReactComponent)\n  );\n}\n\n// Функция получает React-элемент (например, <App />)\n// и возвращает узел, являющуюся вершиной DOM- или Native-дерева элементов.\nfunction mount(element) {\n  var type = element.type;\n  var props = element.props;\n\n  // Мы будем вычислять необходимый элемент\n  // либо выполняя type как функцию,\n  // либо с помощью создания экземпляра и вызова метода render().\n  var renderedElement;\n  if (isClass(type)) {\n    // Компонент является классом\n    var publicInstance = new type(props);\n    // Задать пропсы\n    publicInstance.props = props;\n    // Если необходимо, вызвать метод жизненного цикла\n    if (publicInstance.componentWillMount) {\n      publicInstance.componentWillMount();\n    }\n    // Получить необходимый элемент с помощью вызова render()\n    renderedElement = publicInstance.render();\n  } else {\n    // Компонент является функцией\n    renderedElement = type(props);\n  }\n\n  // Этот процесс может быть рекурсивным, потому что компонент может\n  // возвращать другой компонент.\n  return mount(renderedElement);\n\n  // Примечание: эта реализация не завершена и выполняется бесконечно!\n  // Обрабатывает такие элементы как <App /> и <Button />.\n  // Пока не обрабатывает такие элементы как <div /> и <p />.\n}\n\nvar rootEl = document.getElementById('root');\nvar node = mount(<App />);\nrootEl.appendChild(node);
\n
\n

Примечание:

\n

Пример выше — псевдокод. Он не является реальной реализацией. А также этот код приводит к переполнению стека, потому что мы не описали, когда нужно остановить рекурсию.

\n
\n

Рассмотрим основные идеи этого кода:

\n\n

Монтирование базовых элементов

\n

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

\n

В дополнение к пользовательским («составным») компонентам, React-элементы также могут быть представлены платформо-специфическими («базовыми») компонентами. Например, Button может вернуть <div /> из метода render().

\n

Если свойство type имеет тип string, значит мы имеем дело с базовым элементом:

\n
console.log(<div />);\n// { type: 'div', props: {} }
\n

Для базового элемента не существует пользовательского кода.

\n

Когда согласователь встречает базовый элемент, ответственность за монтирование возьмёт на себя рендерер. Например, React DOM может создать DOM-узел.

\n

Если элемент имеет потомков, согласователь рекурсивно монтирует их, следуя алгоритму выше. Потомки могут быть базовыми (например, <div><hr /></div>), составными (например, <div><Button /></div>) или обоих типов.

\n

DOM-узлы, созданные дочерними компонентами, будут добавлены к родительскому DOM-узлу, и рекурсивно будет собрана полная DOM-структура.

\n
\n

Примечание:

\n

Согласователь не связан с DOM. Точный результат монтирования (иногда называемый «смонтированный образ») зависит от рендерера и может быть DOM-узлом (React DOM), строкой (React DOM Server) или числом (React Native).

\n
\n

Если мы изменим код, чтобы он обрабатывал базовые элементы, то результат будет выглядеть вот так:

\n
function isClass(type) {\n  // Подклассы React.Component имеют соответствующий флаг\n  return (\n    Boolean(type.prototype) &&\n    Boolean(type.prototype.isReactComponent)\n  );\n}\n\n// Эта функция обрабатывает только составные элементы.\n// Например, <App /> и <Button />, но не <div />\nfunction mountComposite(element) {\n  var type = element.type;\n  var props = element.props;\n\n  var renderedElement;\n  if (isClass(type)) {\n    // Компонент является классом\n    var publicInstance = new type(props);\n    // Задать пропсы\n    publicInstance.props = props;\n    // Если необходимо, вызвать метод жизненного цикла\n    if (publicInstance.componentWillMount) {\n      publicInstance.componentWillMount();\n    }\n    renderedElement = publicInstance.render();\n  } else if (typeof type === 'function') {\n    // Компонент является функцией\n    renderedElement = type(props);\n  }\n\n  // Эта функция рекурсивна, но иногда достигает границ рекурсии, когда\n  // встречает базовый элемент (такой, как <div />), вместо составного (такого, как <App />):\n  return mount(renderedElement);\n}\n\n// Эта функция обрабатывает только базовые элементы.\n// Например, <div /> и <p />, но не <App />.\nfunction mountHost(element) {\n  var type = element.type;\n  var props = element.props;\n  var children = props.children || [];\n  if (!Array.isArray(children)) {\n    children = [children];\n  }\n  children = children.filter(Boolean);\n\n  // Этот блок кода не следует размещать в согласователе.\n  // Каждый рендерер может инициализировать узлы по-своему.\n  // Например, React Native может создать представление для iOS или Android.\n  var node = document.createElement(type);\n  Object.keys(props).forEach(propName => {\n    if (propName !== 'children') {\n      node.setAttribute(propName, props[propName]);\n    }\n  });\n\n  // Монтировать потомков\n  children.forEach(childElement => {\n    // Потомки могут быть как базовыми (<div />), так и составными (<Button />).\n    // Их мы тоже будем монтировать рекурсивно:\n    var childNode = mount(childElement);\n\n    // Эта строка кода может отличаться\n    // в зависимости от рендерера\n    node.appendChild(childNode);\n  });\n\n  // Вернуть DOM ноду в качестве результата.\n  // Здесь рекурсия заканчивается.\n  return node;\n}\n\nfunction mount(element) {\n  var type = element.type;\n  if (typeof type === 'function') {\n    // Пользовательский компонент\n    return mountComposite(element);\n  } else if (typeof type === 'string') {\n    // Платформо-специфический компонент\n    return mountHost(element);\n  }\n}\n\nvar rootEl = document.getElementById('root');\nvar node = mount(<App />);\nrootEl.appendChild(node);
\n

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

\n

Введение во внутренние экземпляры

\n

Ключевая особенность React — ререндеринг всего без пересоздания DOM или сброса состояния:

\n
root.render(<App />);\n// Использовать уже существующий DOM:\nroot.render(<App />);
\n

Однако, наша реализация знает только как монтировать начальное дерево. Она не может обновлять его, потому что не содержит необходимой информации, например, экземпляры publicInstance, или какой DOM-узел (node) соответствует компоненту.

\n

Согласователь Stack решает эту проблему, сделав функцию mount() методом класса. В этом решении есть недостатки, поэтому мы решили переписать согласователь. Однако, опишем, как он сейчас работает.

\n

Вместо разделения на функции mountHost и mountComposite, мы создадим два класса:

\n

Оба класса имеют конструктор, принимающий element, а также имеют метод mount(), который возвращает необходимый узел. Заменим вызывающую функцию mount() на фабрику, которая будет создавать нужный класс:

\n
function instantiateComponent(element) {\n  var type = element.type;\n  if (typeof type === 'function') {\n    // Пользовательский компонент\n    return new CompositeComponent(element);\n  } else if (typeof type === 'string') {\n    // Платформо-специфический компонент\n    return new DOMComponent(element);\n  }  \n}
\n

Для начала рассмотрим реализацию CompositeComponent:

\n
class CompositeComponent {\n  constructor(element) {\n    this.currentElement = element;\n    this.renderedComponent = null;\n    this.publicInstance = null;\n  }\n\n  getPublicInstance() {\n    // Для составных компонентов сделать экземпляр класса видимым.\n    return this.publicInstance;\n  }\n\n  mount() {\n    var element = this.currentElement;\n    var type = element.type;\n    var props = element.props;\n\n    var publicInstance;\n    var renderedElement;\n    if (isClass(type)) {\n      // Компонент является классом\n      publicInstance = new type(props);\n      // Задать пропсы\n      publicInstance.props = props;\n      // Если необходимо, вызвать метод жизненного цикла\n      if (publicInstance.componentWillMount) {\n        publicInstance.componentWillMount();\n      }\n      renderedElement = publicInstance.render();\n    } else if (typeof type === 'function') {\n      // Компонент является функцией\n      publicInstance = null;\n      renderedElement = type(props);\n    }\n\n    // Сохранить внешний экземпляр\n    this.publicInstance = publicInstance;\n\n    // Получить внутренний экземпляр в соответствии с элементом.\n    // Это может быть DOMComponent для <div /> или <p />,\n    // и CompositeComponent для <App /> или <Button />:\n    var renderedComponent = instantiateComponent(renderedElement);\n    this.renderedComponent = renderedComponent;\n\n    // Монтировать полученный результат\n    return renderedComponent.mount();\n  }\n}
\n

Это не сильно отличается от предыдущей реализации mountComposite(), однако теперь мы можем сохранять некоторую информацию, такую как this.currentElement, this.renderedComponent и this.publicInstance, чтобы использовать во время обновлений.

\n

Заметьте, что экземпляр CompositeComponent, это не то же самое, что экземпляр element.type. CompositeComponent — деталь реализации нашего согласователя, которая не может быть доступна пользователю. Пользовательский класс — это единственное, что мы читаем из element.type, а CompositeComponent создаёт его экземпляр.

\n

Чтобы избежать путаницы, мы будем называть экземпляры CompositeComponent и DOMComponent «внутренними экземплярами». Они существуют для того, чтобы мы могли сохранять в них некоторые долгоживущие данные. Только рендереры и согласователь знают об их существовании.

\n

В противоположность, мы будем называть экземпляры пользовательских классов «внешними экземплярами». Внешние экземпляры — это то, что вы видите как this внутри render() и других методов ваших компонентов.

\n

Функция mountHost(), переименованная в метод mount() класса DOMComponent, также будет выглядеть знакомо:

\n
class DOMComponent {\n  constructor(element) {\n    this.currentElement = element;\n    this.renderedChildren = [];\n    this.node = null;\n  }\n\n  getPublicInstance() {\n    // Для DOM-компонентов сделать DOM-узел видимым.\n    return this.node;\n  }\n\n  mount() {\n    var element = this.currentElement;\n    var type = element.type;\n    var props = element.props;\n    var children = props.children || [];\n    if (!Array.isArray(children)) {\n      children = [children];\n    }\n\n    // Создать и сохранить узел\n    var node = document.createElement(type);\n    this.node = node;\n\n    // Задать атрибуты\n    Object.keys(props).forEach(propName => {\n      if (propName !== 'children') {\n        node.setAttribute(propName, props[propName]);\n      }\n    });\n\n    // Создать и сохранить потомков.\n    // Каждый из них может быть либо DOMComponent, либо CompositeComponent,\n    // в зависимости от типа свойства type (строка или функция).\n    var renderedChildren = children.map(instantiateComponent);\n    this.renderedChildren = renderedChildren;\n\n    // Собрать DOM-узлы, которые возвращает метод mount.\n    var childNodes = renderedChildren.map(child => child.mount());\n    childNodes.forEach(childNode => node.appendChild(childNode));\n\n    // Вернуть DOM-узел в качестве результата\n    return node;\n  }\n}
\n

Основное отличие от метода mountHost() в том, что теперь мы храним this.node и this.renderedChildren внутри DOMComponent. Мы будем использовать их в дальнейшем, чтобы не поломать структуру во время обновлений.

\n

В результате, каждый внутренний экземпляр (составной и базовый) имеет ссылку на свои внутренние экземпляры-потомки. Чтобы лучше представить себе этот процесс, создадим функциональный компонент <App>, который рендерит класс-компонент <Button>, который рендерит <div>. Вот как может выглядеть дерево внутренних экземпляров:

\n
[object CompositeComponent] {\n  currentElement: <App />,\n  publicInstance: null,\n  renderedComponent: [object CompositeComponent] {\n    currentElement: <Button />,\n    publicInstance: [object Button],\n    renderedComponent: [object DOMComponent] {\n      currentElement: <div />,\n      node: [object HTMLDivElement],\n      renderedChildren: []\n    }\n  }\n}
\n

Внутри DOM вы увидите только <div>. Однако дерево внутренних экземпляров содержит как DOMComponent, так и CompositeComponent.

\n

CompositeComponent должен хранить:

\n\n

DOMComponent должен хранить:

\n\n

Если в более сложном приложении вам тяжело представить, как выглядит дерево внутренних экземпляров, React DevTools поможет вам в этом, выделяя базовые экземпляры серым цветом, а составные фиолетовым:

\n\n \n \n \n \n \"React\n \n \n \n \n \n

В завершении, создадим функцию, которая монтирует полученное дерево в узел-контейнер и возвращает внешний экземпляр.

\n
function mountTree(element, containerNode) {\n  // Создать верхнеуровневый внутренний экземпляр\n  var rootComponent = instantiateComponent(element);\n\n  // Монтировать верхнеуровневый компонент внутрь контейнера\n  var node = rootComponent.mount();\n  containerNode.appendChild(node);\n\n  // Вернуть внешний экземпляр\n  var publicInstance = rootComponent.getPublicInstance();\n  return publicInstance;\n}\n\nvar rootEl = document.getElementById('root');\nmountTree(<App />, rootEl);
\n

Демонтирование

\n

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

\n
class CompositeComponent {\n\n  // ...\n\n  unmount() {\n    // Если необходимо, вызвать метод жизненного цикла\n    var publicInstance = this.publicInstance;\n    if (publicInstance) {\n      if (publicInstance.componentWillUnmount) {\n        publicInstance.componentWillUnmount();\n      }\n    }\n\n    // Демонтировать единственный компонент\n    var renderedComponent = this.renderedComponent;\n    renderedComponent.unmount();\n  }\n}
\n

Для DOMComponent демонтировать каждого потомка:

\n
class DOMComponent {\n\n  // ...\n\n  unmount() {\n    // Демонтировать всех потомков\n    var renderedChildren = this.renderedChildren;\n    renderedChildren.forEach(child => child.unmount());\n  }\n}
\n

В действительности демонтирование DOM-компонентов также удаляет слушателей событий и очищает кэш, но опустим эти детали.

\n

Теперь добавим верхнеуровневую функцию unmountTree(containerNode), которая аналогична ReactDOM.unmountComponentAtNode():

\n
function unmountTree(containerNode) {\n  // Получить внутренний экземпляр из DOM ноды:\n  // (Пока не работает, нам нужно изменить mountTree(), чтобы хранить переменную.)\n  var node = containerNode.firstChild;\n  var rootComponent = node._internalInstance;\n\n  // Демонтировать дерево и очистить контейнер\n  rootComponent.unmount();\n  containerNode.innerHTML = '';\n}
\n

Чтобы это работало, нам нужно получить корневой внутренний экземпляр из DOM ноды. Мы изменим mountTree(), добавив свойство _internalInstance в корневую ноду. Также научим mountTree() уничтожать уже существующее дерево, чтобы можно было вызывать этот метод несколько раз.

\n
function mountTree(element, containerNode) {\n  // Уничтожить уже существующее дерево\n  if (containerNode.firstChild) {\n    unmountTree(containerNode);\n  }\n\n  // Создать верхнеуровневый внутренний экземпляр\n  var rootComponent = instantiateComponent(element);\n\n  // Монтировать верхнеуровневый компонент внутрь контейнера\n  var node = rootComponent.mount();\n  containerNode.appendChild(node);\n\n  // Сохранить ссылку на внутренний экземпляр\n  node._internalInstance = rootComponent;\n\n  // Вернуть внешний экземпляр\n  var publicInstance = rootComponent.getPublicInstance();\n  return publicInstance;\n}
\n

Теперь вызов unmountTree(), а также повторный вызов mountTree() удалят старое дерево и запустят в компоненте метод жизненного цикла componentWillUnmount().

\n

Обновления

\n

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

\n
var rootEl = document.getElementById('root');\n\nmountTree(<App />, rootEl);\n// Использовать уже существующий DOM:\nmountTree(<App />, rootEl);
\n

Расширим наш внутренний экземпляр ещё одним методом. В дополнение к mount() и unmount(), в DOMComponent и CompositeComponent будет реализован новый метод receive(nextElement):

\n
class CompositeComponent {\n  // ...\n\n  receive(nextElement) {\n    // ...\n  }\n}\n\nclass DOMComponent {\n  // ...\n\n  receive(nextElement) {\n    // ...\n  }\n}
\n

Его задача — сделать всё необходимое, чтобы обновить компонент (со всеми потомками) в соответствии с nextElement.

\n

Несмотря на то, что мы рекурсивно обновляем экземпляры DOMComponent и CompositeComponent, эту часть часто называют «diff-алгоритмом для виртуального DOM».

\n

Обновление составных компонентов

\n

Когда составной компонент получает новый элемент, мы выполняем метод жизненного цикла componentWillUpdate().

\n

Затем мы заново отрендерим компонент с новыми пропсами и получим новый React-элемент:

\n
class CompositeComponent {\n\n  // ...\n\n  receive(nextElement) {\n    var prevProps = this.currentElement.props;\n    var publicInstance = this.publicInstance;\n    var prevRenderedComponent = this.renderedComponent;\n    var prevRenderedElement = prevRenderedComponent.currentElement;\n\n    // Обновить *свой* элемент\n    this.currentElement = nextElement;\n    var type = nextElement.type;\n    var nextProps = nextElement.props;\n\n    // Вычислить новый результат render()\n    var nextRenderedElement;\n    if (isClass(type)) {\n      // Компонент является классом\n      // Если необходимо, вызвать метод жизненного цикла\n      if (publicInstance.componentWillUpdate) {\n        publicInstance.componentWillUpdate(nextProps);\n      }\n      // Обновить пропсы\n      publicInstance.props = nextProps;\n      // Отрендерить снова\n      nextRenderedElement = publicInstance.render();\n    } else if (typeof type === 'function') {\n      // Компонент является функцией\n      nextRenderedElement = type(nextProps);\n    }\n\n    // ...
\n

Далее, мы можем рассмотреть свойство type. Если оно не изменилось с последнего рендеринга, то компонент ниже может быть обновлён.

\n

Например, если в первый раз результат был <Button color=\"red\" />, а во второй — <Button color=\"blue\" />, значит мы можем просто вызвать receive() (с новым элементом в качестве параметра) у соответствующего внутреннего экземпляра:

\n
    // ...\n\n    // Если свойство type не изменилось, то\n    // переиспользовать внутренний экземпляр и прекратить выполнение.\n    if (prevRenderedElement.type === nextRenderedElement.type) {\n      prevRenderedComponent.receive(nextRenderedElement);\n      return;\n    }\n\n    // ...
\n

Однако, если свойство type нового элемента отличается от предыдущего, то мы не можем обновить внутренний экземпляр. <button> не может «превратиться» в <input>.

\n

Вместо этого мы демонтируем существующий внутренний экземпляр и монтируем новый, который будет рендерить соответствующий элемент. Например, вот что происходит, когда компонент, который ранее рендерил <button />, рендерит <input />:

\n
    // ...\n\n    // Если мы дошли до сюда, то нам нужно демонтировать предыдущий\n    // компонент, монтировать новый, и обменять их ноды.\n\n    // Найти старый узел, потому что его нужно заменить\n    var prevNode = prevRenderedComponent.getHostNode();\n\n    // Демонтировать старого потомка и монтировать нового\n    prevRenderedComponent.unmount();\n    var nextRenderedComponent = instantiateComponent(nextRenderedElement);\n    var nextNode = nextRenderedComponent.mount();\n\n    // Обновить потомка\n    this.renderedComponent = nextRenderedComponent;\n\n    // Заменить старого потомка на нового\n    // Заметка: этот код завязан на рендерере и,\n    // в идеале, должен находиться вне CompositeComponent:\n    prevNode.parentNode.replaceChild(nextNode, prevNode);\n  }\n}
\n

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

\n

Существует ещё одна ситуация, когда компонент будет заново монтировать потомка вместо вызова receive() — key элемента изменился. Мы не будем обсуждать обработку key в этой главе, потому что это добавит ещё больше сложности к и без того уже сложному материалу.

\n

Заметьте, что во внутренний экземпляр нам нужно добавить метод getHostNode(), чтобы возможно было обнаружить платформо-специфичные ноды и заменить их во время обновления. Его реализация очевидна в обоих классах:

\n
class CompositeComponent {\n  // ...\n\n  getHostNode() {\n    // Попросить внутренний экземпляр предоставить ноду.\n    // Этот вызов рекурсивно развернёт все компоненты.\n    return this.renderedComponent.getHostNode();\n  }\n}\n\nclass DOMComponent {\n  // ...\n\n  getHostNode() {\n    return this.node;\n  }  \n}
\n

Обновление базовых компонентов

\n

Хостовые компоненты, такие как DOMComponent, обновляются по-другому. Когда они получают элемент, то им необходимо обновить платформо-специфический view. В случае с React DOM, это означает обновить DOM-атрибуты:

\n
class DOMComponent {\n  // ...\n\n  receive(nextElement) {\n    var node = this.node;\n    var prevElement = this.currentElement;\n    var prevProps = prevElement.props;\n    var nextProps = nextElement.props;    \n    this.currentElement = nextElement;\n\n    // Удалить старые атрибуты.\n    Object.keys(prevProps).forEach(propName => {\n      if (propName !== 'children' && !nextProps.hasOwnProperty(propName)) {\n        node.removeAttribute(propName);\n      }\n    });\n    // Задать новые атрибуты.\n    Object.keys(nextProps).forEach(propName => {\n      if (propName !== 'children') {\n        node.setAttribute(propName, nextProps[propName]);\n      }\n    });\n\n    // ...
\n

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

\n

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

\n

Соберём DOM-операции над потомками в список, чтобы мы смогли выполнить их обновление группой:

\n
    // ...\n\n    // Массивы React-элементов\n    var prevChildren = prevProps.children || [];\n    if (!Array.isArray(prevChildren)) {\n      prevChildren = [prevChildren];\n    }\n    var nextChildren = nextProps.children || [];\n    if (!Array.isArray(nextChildren)) {\n      nextChildren = [nextChildren];\n    }\n    // Массивы внутренних экземпляров\n    var prevRenderedChildren = this.renderedChildren;\n    var nextRenderedChildren = [];\n\n    // Проходя по потомкам, будем добавлять операции в массив.\n    var operationQueue = [];\n\n    // Заметка: блок кода ниже очень упрощён! Он не обрабатывает \n    // переупорядочивание, передачу компонентов как пропсов, и потомков со свойством `key`.\n    // Он нужен только чтобы показать основы, а не детали.\n\n    for (var i = 0; i < nextChildren.length; i++) {\n      // Попытаться получить внутренний экземпляр\n      var prevChild = prevRenderedChildren[i];\n\n      // Если не существует внутреннего экземпляра с этим индексом,\n      // то потомок будет добавлен в конец. Создать новый\n      // внутренний экземпляр, монтировать его и использовать его ноду.\n      if (!prevChild) {\n        var nextChild = instantiateComponent(nextChildren[i]);\n        var node = nextChild.mount();\n\n        // Записать, что нам нужно добавить ноду\n        operationQueue.push({type: 'ADD', node});\n        nextRenderedChildren.push(nextChild);\n        continue;\n      }\n\n      // Мы можем обновлять экземпляры только если их элементы совпадают.\n      // Например, <Button size=\"small\" /> может быть обновлён на\n      // <Button size=\"large\" />, но не на <App />.\n      var canUpdate = prevChildren[i].type === nextChildren[i].type;\n\n      // Если невозможно обновить существующий экземпляр, то мы должны\n      // демонтировать его и монтировать вместо него новый.\n      if (!canUpdate) {\n        var prevNode = prevChild.getHostNode();\n        prevChild.unmount();\n\n        var nextChild = instantiateComponent(nextChildren[i]);\n        var nextNode = nextChild.mount();\n\n        // Записать, что нам нужно поменять ноды\n        operationQueue.push({type: 'REPLACE', prevNode, nextNode});\n        nextRenderedChildren.push(nextChild);\n        continue;\n      }\n\n      // Если возможно обновить существующий экземпляр, то передать\n      // новый элемент в receive() и позволить ему обновиться самостоятельно.\n      prevChild.receive(nextChildren[i]);\n      nextRenderedChildren.push(prevChild);\n    }\n\n    // Наконец, демонтировать потомков, которых больше не существует:\n    for (var j = nextChildren.length; j < prevChildren.length; j++) {\n      var prevChild = prevRenderedChildren[j];\n      var node = prevChild.getHostNode();\n      prevChild.unmount();\n\n      // Записать, что нам нужно удалить ноды      \n      operationQueue.push({type: 'REMOVE', node});\n    }\n\n    // Обновить список внутренних экземпляров\n    this.renderedChildren = nextRenderedChildren;\n\n    // ...
\n

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

\n
    // ...\n\n    // Обработать очередь операций\n    while (operationQueue.length > 0) {\n      var operation = operationQueue.shift();\n      switch (operation.type) {\n      case 'ADD':\n        this.node.appendChild(operation.node);\n        break;\n      case 'REPLACE':\n        this.node.replaceChild(operation.nextNode, operation.prevNode);\n        break;\n      case 'REMOVE':\n        this.node.removeChild(operation.node);\n        break;\n      }\n    }\n  }\n}
\n

И всё это нужно для обновления хостовых компонентов.

\n

Итоговая реализация обновлений

\n

Сейчас, когда в CompositeComponent и DOMComponent реализован метод receive(nextElement), мы можем изменить вызывающую функцию mountTree(), чтобы вызывать её, когда свойство type в элементе не изменилось:

\n
function mountTree(element, containerNode) {\n  // Проверить наличие дерева\n  if (containerNode.firstChild) {\n    var prevNode = containerNode.firstChild;\n    var prevRootComponent = prevNode._internalInstance;\n    var prevElement = prevRootComponent.currentElement;\n\n    // Переиспользовать существующий корневой компонент, если это возможно\n    if (prevElement.type === element.type) {\n      prevRootComponent.receive(element);\n      return;\n    }\n\n    // Иначе, демонтировать существующее дерево\n    unmountTree(containerNode);\n  }\n\n  // ...\n\n}
\n

Теперь вызов mountTree() дважды с одним и тем же параметром ничего не разрушает.

\n
var rootEl = document.getElementById('root');\n\nmountTree(<App />, rootEl);\n// Переиспользовать существующий DOM:\nmountTree(<App />, rootEl);
\n

Это и есть основа работы React изнутри.

\n

Что не было рассмотрено

\n

Эта реализация упрощена по сравнению с реальной. Существует много важных вещей на которые мы не обратили внимание:

\n\n

Погружение в код

\n\n

Будущие изменения

\n

Согласователь Stack имеет ограничения, такие как синхронность и невозможность прерывать выполнение или разделять задачу на подзадачи. Сейчас идёт работа над new Fiber reconciler с совершенно другой архитектурой. В будущем, мы собираемся поменять согласователь Stack на Fiber, но в настоящий момент он не является полноценным аналогом.

\n

Что дальше?

\n

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

","frontmatter":{"title":"Детали реализации","next":"design-principles.html","prev":"codebase-overview.html"},"fields":{"path":"content/docs/implementation-notes.md","slug":"docs/implementation-notes.html"}}},"pageContext":{"slug":"docs/implementation-notes.html"}},"staticQueryHashes":[]}