Відповіді:
Основне завдання 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 element, не має іншого змістовного представлення в документі. Він просто повідомляє 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 автоматично "змонтує" цю дитину в її батьків.
findDOMNodeелементи React).
Реакція - це ізоморфний / універсальний каркас. Це означає, що існує віртуальне представлення дерева компонентів інтерфейсу, і це окремо від фактичного відображення, яке воно виводить у браузері. З документації:
Реакція настільки швидка, оскільки вона ніколи не спілкується безпосередньо з DOM. React підтримує швидке представлення DOM в пам'яті.
Однак представлення в пам'яті не пов'язане безпосередньо з DOM у веб-переглядачі (навіть якщо воно називається Virtual DOM, що є прикрою і заплутаною назвою для універсальної програми додатків), а це просто DOM-подібні дані, структура, яка представляє всі ієрархії компонентів інтерфейсу та додаткові метадані. Віртуальний DOM - лише деталь реалізації.
"Ми вважаємо, що справжні основи React - це просто ідеї компонентів та елементів: вміти описати те, що ви хочете зробити декларативним способом. Це фрагменти, якими поділяються всі ці різні пакети. Частини React, специфічні для певного візуалізації цілі зазвичай не те, про що ми думаємо, коли думаємо про Реагувати ". - Блог React js
Отже, висновок полягає в тому, що React - це рендеринг агностик , а це означає, що йому не байдуже, що є кінцевим результатом. Це може бути дерево DOM у браузері, це може бути XML, Native компоненти або JSON.
"Коли ми дивимось на пакети, такі як" реакція "," реакція "," реакція на мистецтво "," реагувати-полотно "та" реагувати-три ", стає зрозуміло, що краса та сутність React не мають нічого спільного з браузерами чи DOM". - Блог React js
Тепер, коли ви знаєте, як працює React, легко відповісти на ваше запитання :)
Монтаж - це процес виведення віртуального представлення компонента в остаточне представлення інтерфейсу (наприклад, DOM або Native Components).
У браузері, що означатиме виведення елемента React у фактичний елемент DOM (наприклад, HTML div або li елемент) у дереві DOM. У нативній програмі це означало б виведення елемента React у нативний компонент. Ви також можете написати власний рендер і вивести компоненти React в JSON або XML або навіть XAML, якщо у вас є сміливість.
Отже, монтаж / демонтаж оброблювачів є критично важливим для програми React, оскільки ви можете бути впевнені, що компонент виводиться / надається лише тоді, коли він є монтажу . Однак, componentDidMountобробник викликається лише під час надання фактичного представлення користувальницького інтерфейсу (DOM або Native Components), але не, якщо ви передаєте HTML-рядок на сервері за допомогоюrenderToString , що має сенс, оскільки компонент насправді не встановлений, поки він не досягне браузер і виконує в ньому.
І так, Монтаж - це також прикрою / заплутаною назвою, якщо ви запитаєте мене. ІМХО componentDidRenderі componentWillRenderбули б набагато кращі імена.
componentDidRender, що це заміна, componentDidMountтому що компонент може відображати кілька разів, коли реквізити змінюються після того, як він встановлений один раз.
(id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...).
/react-js-the-king-of-universal-apps/( з коментарями до редагування чітко згадується, що це непрацездатне посилання ), але одночасно редактори відхиляли редагування . Чи може хтось керувати мені, що не так у редагуванні відповіді та видаленні зламаного посилання?
Монтаж стосується компонента в React (створені вузли DOM), який приєднаний до деякої частини документа. Це воно!
Ігноруючи Реакцію, ви можете вважати ці дві основні функції як монтажні:
Які, мабуть, найпоширеніші функції, які React використовує для внутрішньої установки.
Думати про:
компонентWillMount === перед монтуванням
І:
компонентDidMount === після монтажу
appendChild, що таке render?
renderце власне метод, який зробить монтаж самим. Так що componentWillMount== раніше, render== робить вставку DOM і componentDidMount== після монтування (або renderвикликав API DOM для вставки компонента і ця асинхронна операція повністю завершена)
https://facebook.github.io/react/docs/tutorial.html
Тут компонентDidMount - це метод, викликаний автоматично React, коли компонент надається.
Концепція полягає в тому, що ви говорите ReactJS: "Будь ласка, візьміть цю річ, це поле для коментарів або прядильне зображення або все, що це є, я хочу на сторінці браузера, і продовжуйте його і фактично розміщуйте на сторінці браузера. Коли це буде зроблено, зателефонуйте моя функція, яку я зобов’язав, щоб componentDidMountя міг продовжувати ".
componentWillMount- навпаки. Він запуститься негайно, перш ніж ваш компонент відобразиться.
Дивіться також тут https://facebook.github.io/react/docs/component-specs.html
Нарешті, термін "монтажу" видається унікальним для react.js. Я не думаю, що це загальна концепція javascript або навіть загальна концепція браузера.
componentDidUpdateвикликається замість цього.
Монтаж стосується початкового завантаження сторінки, коли ваш компонент React вперше надається. З документації React на монтаж: компонентDidMount:
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).
Ви можете порівняти це з функцією компонентаDidUpdate, який викликається кожного разу, коли React надає (за винятком початкового кріплення).
Основна мета React js - створити багаторазові компоненти. Тут компоненти - це окремі частини веб-сторінки. Наприклад, на веб-сторінці заголовок - це компонент, колонтитул - це компонент, тост-сповіщення є компонентом і т. Д. Термін "mount" говорить нам про те, що ці компоненти завантажуються або надаються в DOM. Це багато API вищого рівня та методи боротьби з цим.
Щоб зробити це простішим, встановлене означає, що компонент завантажено в DOM, а відключений означає, що компоненти були вилучені з DOM.
React.createElement(FooComponent)ви не створюєте екземплярFooComponent.fooявляє собою віртуальне представлення DOM,FooComponentвідоме також як елемент React. Але, можливо, саме це ви мали на увазі підFooComponentтипом React . Незалежно від того, що ви не монтуєте компоненти в React, ви викликаєте візуалізацію, яка, в свою чергу, може монтувати компонент, якщо потрібно створити фактичний вузол DOM для представлення компонента в дереві DOM. Фактичний монтаж - це подія, при якій це відбувається вперше.