在学习 ReactJS 时，我多次听到“mount”这个词。似乎有关于这个术语的生命周期方法和错误。React 挂载到底是什么意思？
例子： componentDidMount() and componentWillMount()
React js 中的“挂载”是什么？
IT技术
javascript
reactjs
2021-02-21 16:01:32
6个回答
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 会自动将这个子组件“挂载”到它的父组件中。
React 是一个同构/通用的框架。这意味着有一个 UI 组件树的虚拟表示，它与它在浏览器中输出的实际渲染是分开的。从文档：
React 如此之快是因为它从不直接与 DOM 对话。React 维护着 DOM 的快速内存表示。
然而，内存中的表示并不直接与浏览器中的 DOM 绑定（即使它被称为虚拟 DOM，对于通用应用程序框架来说，这是一个不幸且令人困惑的名称），它只是一个类似 DOM 的数据——表示所有 UI 组件层次结构和附加元数据的结构。虚拟 DOM 只是一个实现细节。
“我们认为 React 的真正基础只是组件和元素的概念：能够以声明的方式描述你想要渲染的内容。这些是所有这些不同的包共享的部分。React 特定于某些渲染的部分当我们想到 React 时，目标通常不是我们想到的那样。” - React js 博客
所以，结论是React 是 Rendering agnostic，这意味着它不关心最终输出是什么。它可以是浏览器中的 DOM Tree，可以是 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 或本机组件）时才会调用处理程序，但如果您使用 渲染到服务器上的 HTML 字符串，则不会调用处理程序renderToString，这是有道理的，因为组件在到达浏览器并在其中执行。
而且，是的，如果您问我，Mounting也是一个不幸/令人困惑的名称。恕我直言componentDidRender，componentWillRender将是更好的名字。
https://facebook.github.io/react/docs/tutorial.html
在这里，componentDidMount 是一个在组件被渲染时被 React 自动调用的方法。
这个概念是你告诉 ReactJS，“请把这个东西，这个评论框或旋转图像或任何我想要的东西放在浏览器页面上，然后把它实际放在浏览器页面上。完成后，调用我必须履行的职责，componentDidMount以便我可以继续。”
componentWillMount是相反的。它会在您的组件呈现之前立即触发。
另请参见此处 https://facebook.github.io/react/docs/component-specs.html
最后，“挂载”一词似乎是 react.js 独有的。我不认为这是一个通用的 javascript 概念，甚至不是一个通用的浏览器概念。
挂载是指第一次渲染 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 每次渲染时都会调用（初始挂载除外）。