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

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

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

77
javascript reactjs

6 ответов

основная задача 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 получает визуализацию. он еще не" установлен".

вы можете сказать, что реагируете на "монтирование" его в контейнер DOM, вызвав:

ReactDOM.render(foo, domContainer);

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

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

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

70

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

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

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

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

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

" как мы смотрим на пакеты, такие как react-native, react-art, react-canvas и react-three, стало ясно, что красота и сущность React не имеют ничего общего с браузерами или DOM."- React JS Blog

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

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

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

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

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

http://www.ministryofprogramming.com/react-js-the-king-of-universal-apps/

26

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

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

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

componentWillMount наоборот. Он выстрелит непосредственно перед отрисовкой компонента.

см. здесь https://facebook.github.io/react/docs/component-specs.html

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

5

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

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

replaceChild

appendChild

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

думать:

componentWillMount === перед креплением

и:

componentDidMount === после монтажа

5

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

3

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

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

0