什么是React js中的"Mounting"？

Question

在学习ReactJS时,我听到"mount"这个词太多次了.并且似乎存在关于该术语的生命周期方法和错误.React到底意味着什么？

例子: componentDidMount() and componentWillMount()

Answer 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);

这告诉React是时候foo在页面上显示了.React将创建FooComponent该类的实例并调用其render方法.让我们说它呈现一个<div />,在这种情况下,React将为它创建一个divDOM节点,并将其插入DOM容器中.

创建与React组件对应的实例和DOM节点以及将它们插入DOM的过程称为安装.

请注意,通常您只需要调用ReactDOM.render()以安装根组件.您无需手动"装载"子组件.每次父组件调用setState(),并且其render方法表示应该首次呈现特定子项时,React会自动将此子项"挂载"到其父项中.

Answer 2

React是一个同构/通用框架.这意味着存在UI组件树的虚拟表示,并且它与在浏览器中输出的实际呈现分开.从文档:

React是如此之快,因为它从不直接与DOM对话.React维护DOM的快速内存表示.

但是,内存中的表示并不直接与浏览器中的DOM绑定(即使它被称为虚拟DOM,这是一个通用应用程序框架的一个令人遗憾和令人困惑的名称),它只是一个类似DOM的数据 -表示所有UI组件层次结构和其他元数据的结构.Virtual DOM只是一个实现细节.

"我们认为React的真正基础只是组件和元素的想法:能够以声明的方式描述你想要呈现的内容.这些是所有这些不同包共享的部分.React的部分特定于某些呈现当我们想到React时,目标通常不是我们想到的." - React js Blog

因此,结论是React是渲染不可知的,这意味着它不关心什么是最终输出.它可以是浏览器中的DOM树,它可以是XML,Native组件或JSON.

"当我们看看反应原生,反应艺术,反应画布和反应三等软件包时,很明显React的美丽和本质与浏览器或DOM无关." - React js Blog

现在,您知道React如何工作,很容易回答您的问题:)

挂载是将组件的虚拟表示输出到最终UI表示(例如DOM或本机组件)的过程.

在浏览器中意味着将反应元素输出到DOM树中的实际DOM元素(例如,HTML div或li元素).在本机应用程序中,这意味着将React元素输出到本机组件中.如果你有勇气,你也可以编写自己的渲染器并将React组件输出到JSON或XML甚至是XAML.

因此,安装/卸载处理程序对于React应用程序至关重要,因为您只能确保组件在安装时输出/呈现.但是,componentDidMount只有在渲染到实际的UI表示(DOM或本机组件)时才会调用处理程序,但如果使用渲染到服务器上的HTML字符串则不会调用该处理程序renderToString,这是有道理的,因为组件在到达之前实际上并未实际安装浏览器并在其中执行.

而且,是的,如果你问我,Mounting也是一个不幸/令人困惑的名字.恕我直言componentDidRender,componentWillRender将是更好的名字.

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

Answer 3

挂载是指React(创建的DOM节点)中的组件附加到文档的某些部分.而已!

忽略React,您可以将这两个本机函数视为安装:

的replaceChild

使用appendChild

这可能是React用于内部安装的最常用功能.

考虑到:

componentWillMount === before-mount

和:

componentDidMount === after-mount

Answer 4

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

这里,componentDidMount是在呈现组件时由React自动调用的方法.

这个概念是你告诉ReactJS,"请把这个东西,这个评论框或旋转图像或者我想要的任何东西放在浏览器页面上,然后继续将它放在浏览器页面上.完成后,调用我必须遵守的功能,componentDidMount所以我可以继续."

componentWillMount恰恰相反.它将在您的组件呈现之前立即触发.

另见 https://facebook.github.io/react/docs/component-specs.html

最后,"mount"术语似乎是react.js独有的.我不认为它是一般的JavaScript概念,甚至是一般的浏览器概念.

Answer 5

挂载是指第一次渲染 React 组件时的初始页面加载。来自 Mounting 的 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 每次渲染时都会调用（初始挂载除外）。

Answer 6

React js 的主要目标是创建可重用的组件。在这里，组件是网页的各个部分。例如，在网页中，页眉是一个组件，页脚是一个组件，Toast 通知是一个组件等等。术语“挂载”告诉我们这些组件是在 DOM 中加载或渲染的。这些是处理此问题的许多顶级 API 和方法。

简单来说，mounted 表示组件已加载到 DOM 中，unmounted 表示组件已从 DOM 中删除。