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

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

React 通过“挂载”（将节点添加到 DOM）、“卸载”（从 DOM 中删除它们）和“更新”（对 DOM 中已有的节点进行更改）来实现此目的。

React 节点如何表示为 DOM 节点，以及它在 DOM 树中出现的位置和时间由顶级 API 管理。为了更好地了解正在发生的事情，请看最简单的例子：

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

那么，什么是它，你能用它做什么呢？，目前，是一个普通的JavaScript对象，大致看起来像这样（简化）：foofoo

{
  type: FooComponent,
  props: {}
}

它目前不在页面上的任何地方，即它不是DOM元素，不存在于DOM树中的任何位置，除了是React元素节点之外，在文档中没有其他有意义的表示形式。它只是告诉 React 如果渲染这个 React 元素，屏幕上需要显示什么。它尚未“安装”。

你可以告诉 React 通过调用将其“挂载”到 DOM 容器中：

ReactDOM.render(foo, domContainer);

这告诉 React 是时候在页面上显示了。React 将创建该类的一个实例并调用其方法。假设它渲染一个 ，在这种情况下，React 将为它创建一个 DOM 节点，并将其插入 DOM 容器中。fooFooComponentrender<div />div

创建与 React 组件对应的实例和 DOM 节点，并将它们插入 DOM 的过程称为挂载。

请注意，通常您只会调用以挂载根组件。您无需手动“装载”子组件。每当父组件调用 ，并且其方法说应该首次渲染一个特定的子组件时，React 都会自动将这个子组件“装载”到其父级中。ReactDOM.render()setState()render

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

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

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

“我们认为 React 的真正基础只是组件和元素的概念：能够以声明性的方式描述你想要呈现的内容。这些是所有这些不同包共享的部分。React 中特定于某些渲染目标的部分通常不是我们在考虑 React 时所想到的。

因此，结论是 React 是 Rendering 不可知论者，这意味着它不关心最终输出是什么。它可以是浏览器中的 DOM 树，也可以是 XML、本机组件或 JSON。

“当我们看到像react-native，react-art，react-canvas和react-three这样的软件包时，很明显，React的美丽和本质与浏览器或DOM无关。

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

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

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

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

而且，是的，如果您问我，安装也是一个不幸/令人困惑的名字。恕我直言，会是更好的名字。componentDidRendercomponentWillRender