Что такое "Монтаж" в React js?

Ответ 1

Основная задача 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);

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

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

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

Ответ 2

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

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

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

"Мы думаем, что истинные основы React - это просто идеи компонентов и элементов: возможность описать то, что вы хотите визуализировать декларативным способом. Это части, разделяемые всеми этими различными пакетами. Части React, специфичные для определенного рендеринга цели обычно не то, о чем мы думаем, когда думаем о React. " - Реагируйте на блог JS

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

"Когда мы смотрим на такие пакеты, как" реактивный "," реактивный "," реактивный холст "и" реактивный три ", становится ясно, что красота и сущность React не имеет ничего общего с браузерами или DOM". - Реагируйте на блог JS

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

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

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

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

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

Ответ 3

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

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

replaceChild

AppendChild

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

Подумайте о:

componentWillMount === перед монтированием

И:

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

Ответ 4

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

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

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

componentWillMount наоборот. Он сработает немедленно, прежде чем ваш компонент рендерится.

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

Наконец, термин "монтировать", по-видимому, уникален для response.js. Я не думаю, что это общая концепция JavaScript или даже общая концепция браузера.

Ответ 5

Установка относится к начальной загрузке страницы, когда компонент 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 render (кроме начального монтирования).

Ответ 6

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

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