Question

我听到的话是＆＃34; mount＆＃34;学习ReactJS的次数太多了。并且似乎存在关于该术语的生命周期方法和错误。 React到底意味着什么呢？

示例：componentDidMount() and componentWillMount()

Answer 1

React的主要工作是弄清楚如何修改DOM以匹配组件想要在屏幕上呈现的内容。

React通过“挂载”（向DOM添加节点），“卸载”（从DOM中删除它们）和“更新”（对DOM中已存在的节点进行更改）来实现。

如何将React节点表示为DOM节点，以及它在DOM树中出现的位置由top-level 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将为它创建一个div DOM节点，并将其插入到DOM容器中。

这个创建与React组件相对应的实例和DOM节点并将它们插入DOM的过程称为mount。

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

Answer 2

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

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

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

＆＃34;我们认为React的真正基础只是组件和元素的想法：能够以声明的方式描述您想要呈现的内容。这些是所有这些不同包共享的部分。特定于某些渲染目标的React部分通常不是我们在想到React时所想到的。＆＃34; - React js Blog

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

＆＃34;当我们看看反应原生，反应艺术，反应画布和反应三等软件包时，很明显React的美丽和本质与浏览器无关或者DOM。＆＃34; - React js Blog

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

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

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

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

而且，是的，如果你问我， 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组件时的初始页面加载。从安装的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通知是一个组件等。术语“mount”告诉我们这些组件是在DOM中加载或呈现的。这些是处理此问题的许多顶级API和方法。

为简化起见，mount意味着组件已加载到DOM，卸载意味着组件已从DOM中删除。

什么是＆＃34; Mounting＆＃34;在React js？

6 个答案: