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

What is "Mounting" in React js?

提问by gates

I am hearing the term "mount" too many times while learning ReactJS. And there seem to be lifecycle methods and errors regarding this term. What exactly does React mean by mounting?

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

Examples: componentDidMount() and componentWillMount()

例子： componentDidMount() and componentWillMount()

回答by Filip Dupanovi?

The main job of React is to figure out how to modify the DOM to match what the components want to be rendered on the screen.

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

React does so by "mounting" (adding nodes to the DOM), "unmounting" (removing them from the DOM), and "updating" (making changes to nodes already in the DOM).

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

How a React node is represented as a DOM node and where and when it appears in the DOM tree is managed by the top-level API. To get a better idea about what's going on, look at the most simple example possible:

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

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

So what is fooand what can you do with it? foo, at the moment, is a plain JavaScript object that looks roughly like this (simplified):

那么什么是foo，你可以用它做什么？foo，目前，是一个普通的 JavaScript 对象，大致如下（简化）：

{
  type: FooComponent,
  props: {}
}

It's currently not anywhere on the page, i.e. it is not a DOM element, doesn't exist anywhere in the DOM tree and, aside from being React element node, has no other meaningful representation in the document. It just tells React what needsto be on the screen ifthis React element gets rendered.It is not "mounted" yet.

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

You can tell React to "mount" it into a DOM container by calling:

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

ReactDOM.render(foo, domContainer);

This tells React it's time to show fooon the page. React will create an instance of the FooComponentclass and call its rendermethod. Let's say it renders a <div />, in that case React will create a divDOM node for it, and insert it into the DOM container.

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

This process of creating instances and DOM nodes corresponding to React components, and inserting them into the DOM, is called mounting.

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

Note that normally you'd only call ReactDOM.render()to mount the root component(s). You don't need to manually "mount" the child components. Every time a parent component calls setState(), and its rendermethod says a particular child should be rendered for the first time, React will automatically "mount" this child into its parent.

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

回答by Faris Zacina

React is an isomorphic/universalframework. That means that there is a virtual representation of the UI component tree, and that is separate from the actual rendering that it outputs in the browser. From the documentation:

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

React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM.

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

However, that in-memory representation is not tied directly to the DOM in the browser (even though it is called Virtual DOM, which is an unfortunate and confusing namefor an universal apps framework), and it is just a DOM-like data-structure that represents all the UI components hierarchy and additional meta-data. Virtual DOM is just an implementation detail.

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

"We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React." - React js Blog

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

So, the conclusion is that React is Rendering agnostic, which means that it doesn't care about what is the final output. It can be a DOM Tree in the browser, it can be XML, Native components or JSON.

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

"As we look at packages like react-native, react-art, react-canvas, and react-three, it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM." - React js Blog

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

Now, that you know how React works, it is easy to answer your question :)

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

Mountingis the process of outputting the virtual representation of a component into the final UI representation (e.g. DOM or Native Components).

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

In a browser that would mean outputting a React Element into an actual DOM element (e.g. an HTML divor lielement) in the DOM tree. In a native application that would mean outputting a React element into a native component. You can also write your own renderer and output React components into JSON or XML or even XAML if you have the courage.

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

So, mounting/unmounting handlers are critical to a React application, because you can only be sure a component is output/rendered when it is mounted. However, the componentDidMounthandler is invoked only when rendering to an actual UI representation (DOM or Native Components) but not if you are rendering to an HTML string on the server using renderToString, which makes sense, since the component is not actually mounted until it reaches the browser and executes in it.

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

And, yes, Mountingis also an unfortunate/confusing name, if you ask me. IMHO componentDidRenderand componentWillRenderwould be much better names.

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

回答by frontsideup

Mounting refers to the component in React (created DOM nodes) being attached to some part of the document. That's it!

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

Ignoring React you can think of these two native functions as mounting:

忽略 React，您可以将这两个本机函数视为挂载：

replaceChild

替换孩子

appendChild

附加子项

Which are likely the most common functions React uses to mount internally.

这可能是 React 用于内部挂载的最常见函数。

Think of:

考虑到：

componentWillMount === before-mount

componentWillMount === 安装前

And:

和：

componentDidMount === after-mount

componentDidMount === 挂载后

回答by Ross Presser

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

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

Here, componentDidMount is a method called automatically by React when a component is rendered.

在这里，componentDidMount 是一个在组件被渲染时被 React 自动调用的方法。

The concept is that you're telling ReactJS, "please take this thing, this comment box or spinning image or whatever it is I want on the browser page, and go ahead and actually put it on the browser page. When that's done, call my function that I've bound to componentDidMountso I can proceed."

这个概念是你告诉 ReactJS，“请把这个东西，这个评论框或旋转图像或任何我想要的东西放在浏览器页面上，然后把它实际放在浏览器页面上。完成后，调用我必须履行的职能，componentDidMount以便我可以继续。”

componentWillMountis the opposite. It will fire immediately BEFORE your component renders.

componentWillMount是相反的。它会在您的组件呈现之前立即触发。

See also here https://facebook.github.io/react/docs/component-specs.html

另请参见此处 https://facebook.github.io/react/docs/component-specs.html

Finally, the "mount" term seems to be unique to react.js. I don't think it is a general javascript concept, or even a general browser concept.

最后，“挂载”一词似乎是 react.js 独有的。我不认为这是一个通用的 javascript 概念，甚至不是一个通用的浏览器概念。

回答by Mark Brownsword

Mounting refers to the initial page loading when your React component is first rendered. From React documentation for Mounting: componentDidMount:

挂载是指第一次渲染 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).

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).

You can contrast this with componentDidUpdate function, which is called everytime that React renders (except for the initial mount).

您可以将其与 componentDidUpdate 函数进行对比，该函数在 React 每次渲染时都会调用（初始挂载除外）。

回答by Pranesh Ravi

The main goal of React js is to create reusable components. Here, components are the individual parts of a webpage. For example, in a webpage the header is a component, the footer is a component, a toast notification is a component and etc. The term "mount" tells us that these components are loaded or rendered in the DOM. These are many top-level APIs and methods dealing with this.

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

To make it simple, mounted means the component has been loaded to the DOM and unmounted means the components has been removed from the DOM.

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