React js中的“安装”是什么？(What is “Mounting” in React js?)

React js中的“安装”是什么？(What is “Mounting” in React js?)

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

示例： componentDidMount() and componentWillMount()

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?

Examples: componentDidMount() and componentWillMount()

最满意答案

在React中，您使用的组件都可以表示为React节点和DOM节点。

一个React节点如何表示为DOM节点，何时出现在DOM树中是由顶级API管理的 。 要更好地了解发生什么，请查看最简单的示例：

let foo = React.createElement(FooComponent);

那么什么是foo ，你能做什么呢？ foo ，在这一刻，是一个FooComponent React类型的实例。 它目前不在页面上的任何位置，即它不是DOM元素，在DOM树中不存在，除了是React元素节点之外，文档中没有其他有意义的表示。

如果你打电话给React.findDOMNode(foo)你会得到一个假的对象。 为什么？ foo没有DOM表示，因为它目前不需要在DOM树中的任何地方存在。

但是，一旦您尝试在文档中装载React元素节点，您将触发组件生命周期，这将创建一个合适的托管DOM节点：

React.render(foo, container);

从这一点开始， foo不再仅仅是一个React节点。 它有一个相关的DOM节点，现在是文档中的一流公民。 您现在可以将其作为实际的DOM节点在树中某处进行交互，与其他DOM元素一样进行交互：计算它的高度，宽度，应用其他样式，传递给jQuery等。

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

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:

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

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

{ 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 needs to be on the screen if this React element gets rendered. It is not "mounted" yet.

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

ReactDOM.render(foo, domContainer);

This tells React it's time to show foo on the page. React will create an instance of the FooComponent class and call its render method. Let's say it renders a <div />, in that case React will create a div DOM node for it, and insert it into the DOM container.

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

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 render method says a particular child should be rendered for the first time, React will automatically "mount" this child into its parent.