什么是React js中的“安装”？

Question

在学习ReactJS时，我多次听到“ mount”一词。与此术语相比，似乎存在生命周期方法和错误。通过安装，React到底是什么意思？

例子： componentDidMount() and componentWillMount()

Answer 1

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会自动将该子代“装载”到其父代中。