React js 中的“挂载”是什么？

Question

在学习 ReactJS 时，我多次听到“mount”这个词。并且似乎有关于这个术语的生命周期方法和错误。 React 的 mount 到底是什么意思？

示例：componentDidMount() and componentWillMount()

Answer 1

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

React 非常快，因为它从不直接与 DOM 对话。 React 维护 DOM 的快速内存表示。

但是，内存中的表示并不直接与浏览器中的 DOM 绑定（尽管它被称为虚拟 DOM，对于通用应用程序框架来说，这是一个令人遗憾且令人困惑的名称），它只是一个类似 DOM 的数据结构，表示所有 UI 组件层次结构和附加元数据。虚拟 DOM 只是一个实现细节。

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

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

“当我们看到 react-native、react-art、react-canvas 和 react-three 等包时，很明显 React 的美丽和本质与浏览器或 DOM 无关。” - React js 博客

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

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

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

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

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

Answer 2

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 中的过程称为挂载。

请注意，通常您只会调用 ReactDOM.render() 来挂载根组件。您不需要手动“挂载”子组件。每次父组件调用setState()，并且它的render 方法说应该第一次渲染特定的子组件时，React 会自动将该子组件“挂载”到其父组件中。

Answer 3

Mounting 是指 React 中的组件（创建的 DOM 节点）被附加到文档的某些部分。就是这样！

忽略 React 你可以把这两个原生函数想象成挂载：

replaceChild

appendChild

哪些可能是 React 在内部挂载时最常用的函数。

想一想：

componentWillMount === 安装前

还有：

componentDidMount === 安装后

Answer 4

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

为了简单起见，mounted 表示组件已加载到 DOM，unmounted 表示组件已从 DOM 中删除。

Answer 5

Mounting 指的是 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

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 概念，甚至不是通用的浏览器概念。