小编典典

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

reactjs

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

例子: componentDidMount() and componentWillMount()


阅读 298

收藏
2020-07-22

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

2020-07-22