Что такое «монтирование» в React js?

Я слишком часто слышу термин «монтировать», когда изучаю ReactJS. И, похоже, в отношении этого термина есть методы жизненного цикла и ошибки. Что именно React подразумевает под монтированием?

Примеры: componentDidMount() and componentWillMount()

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

React делает это путем «монтирования» (добавления узлов в DOM), «размонтирования» (удаления их из DOM) и «обновления» (внесения изменений в узлы, уже находящиеся в DOM).

Как узел React представлен как узел DOM и где и когда он появляется в дереве DOM, управляется API верхнего уровня . Чтобы лучше понять, что происходит, посмотрите на самый простой из возможных:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

Так что же это такое fooи что с этим делать? fooна данный момент представляет собой простой объект JavaScript, который выглядит примерно так (упрощенно):

{
  type: FooComponent,
  props: {}
}

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

Вы можете указать React, чтобы он «смонтировал» его в контейнер DOM, вызвав:

ReactDOM.render(foo, domContainer);

Это говорит React, что пора показывать fooна странице. React создаст экземпляр FooComponentкласса и вызовет его renderметод. Допустим, он отображает a <div />, в этом случае React создаст divдля него узел DOM и вставит его в контейнер DOM.

Этот процесс создания экземпляров и узлов DOM, соответствующих компонентам React, и их вставки в DOM называется монтированием.

Обратите внимание, что обычно вы вызываете только ReactDOM.render()для монтирования корневых компонентов. Вам не нужно вручную «монтировать» дочерние компоненты. Каждый раз, когда вызывается родительский компонент setState()и его renderметод говорит, что конкретный дочерний элемент должен быть отрисован в первый раз, React автоматически «монтирует» этот дочерний элемент в своего родителя.

React - это изоморфный / универсальный фреймворк. Это означает, что существует виртуальное представление дерева компонентов пользовательского интерфейса, отдельное от фактического рендеринга, выводимого в браузере. Из документации:

React работает так быстро, потому что никогда не обращается напрямую к DOM. React поддерживает быстрое представление DOM в памяти.

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

«Мы думаем, что истинные основы React - это просто идеи компонентов и элементов: возможность декларативно описать то, что вы хотите визуализировать. Эти части являются общими для всех этих разных пакетов. Части React, относящиеся к определенному рендерингу цели обычно не то, о чем мы думаем, когда думаем о React ". - Блог React js

Итак, напрашивается вывод, что React не зависит от рендеринга , а это означает, что его не волнует конечный результат. Это может быть дерево DOM в браузере, это может быть XML, собственные компоненты или JSON.

«Когда мы смотрим на такие пакеты, как react-native, react-art, react-canvas и react-three, становится ясно, что красота и суть React не имеют ничего общего с браузерами или DOM». - Блог React js

Теперь, когда вы знаете, как работает React, легко ответить на ваш вопрос :)

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

В браузере это означало бы вывод элемента React в фактический элемент DOM (например, HTML div или li ) в дереве DOM. В собственном приложении это означало бы вывод элемента React в собственный компонент. Вы также можете написать свой собственный рендерер и выводить компоненты React в JSON, XML или даже XAML, если у вас хватит смелости.

Итак, монтирование / размонтирование обработчиков критически важно для приложения React, потому что вы можете быть уверены, что компонент выводится / отображается только тогда, когда он монтируется . Однако componentDidMountобработчик вызывается только при рендеринге в фактическое представление пользовательского интерфейса (DOM или собственные компоненты), но не при рендеринге в строку HTML на сервере, используяrenderToString , что имеет смысл, поскольку компонент фактически не монтируется, пока не достигнет браузер и выполняет в нем.

И да, Mounting - это тоже неудачное / сбивающее с толку имя, если вы спросите меня. ИМХО componentDidRenderи componentWillRenderимена были бы намного лучше.

Монтирование относится к компоненту в React (созданным узлам DOM), прикрепленному к некоторой части документа. Это оно!

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

replaceChild

AppendChild

Какие функции, вероятно, наиболее распространены в React для внутреннего монтирования.

Думать о:

componentWillMount === до монтирования

И:

componentDidMount === после монтирования

https://facebook.github.io/react/docs/tutorial.html

Здесь componentDidMount - это метод, автоматически вызываемый React при рендеринге компонента.

Идея заключается в том, что вы говорите ReactJS: «Пожалуйста, возьмите эту штуку, это поле для комментариев или вращающееся изображение, или что-то еще, что я хочу на странице браузера, и продолжайте и фактически поместите его на страницу браузера. Когда это будет сделано, позвоните моя функция, к которой я привязан, componentDidMountчтобы продолжить ".

componentWillMountнаоборот. Он будет срабатывать немедленно ПЕРЕД рендерингом вашего компонента.

См. Также здесь https://facebook.github.io/react/docs/component-specs.html

Наконец, термин «монтировать» кажется уникальным для react.js. Я не думаю, что это общая концепция javascript или даже общая концепция браузера.

Монтирование относится к начальной загрузке страницы, когда ваш компонент React впервые отображается. Из документации React для монтирования: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

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

Основная цель React js - создавать повторно используемые компоненты. Здесь компоненты - это отдельные части веб-страницы. Например, на веб-странице заголовок - это компонент, нижний колонтитул - это компонент, всплывающее уведомление - это компонент и т. Д. Термин «монтирование» говорит нам, что эти компоненты загружаются или отображаются в DOM. Это множество API верхнего уровня и методов, решающих эту проблему.

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