在学习ReactJS时,我多次听到“ mount”一词。与此术语相比,似乎存在生命周期方法和错误。通过安装,React到底是什么意思?
例子: componentDidMount() and componentWillMount()
componentDidMount() and componentWillMount()
React的主要工作是弄清楚如何修改DOM以匹配要在屏幕上呈现的组件。
React通过“装载”(将节点添加到DOM),“卸载”(将它们从DOM中删除)和“更新”(对DOM中已经存在的节点进行更改)来做到这一点。
React节点如何表示为DOM节点以及它在DOM树中的出现位置和时间,由顶级API管理。为了更好地了解正在发生的事情,请看一下最简单的示例:
// JSX version: let foo = <FooComponent />; let foo = React.createElement(FooComponent);
那是foo什么,你能用它做什么?foo目前是一个普通的JavaScript对象,大致类似于以下形式(简化):
foo
{ type: FooComponent, props: {} }
它当前不在页面上的任何地方,即它不是DOM元素,也不在DOM树中的任何地方,并且除了是React元素节点外,在文档中没有其他有意义的表示形式。 它只是告诉React 如果 呈现此React元素,则屏幕上 需要 显示什么。 __它尚未“安装”。
您可以通过调用告诉React将其“装入”到DOM容器中:
ReactDOM.render(foo, domContainer);
这告诉React现在该显示foo在页面上了。React将创建FooComponent该类的实例并调用其render方法。假设它渲染一个<div />,在这种情况下,React将为其创建一个divDOM节点,并将其插入DOM容器中。
FooComponent
render
<div />
div
创建实例和与React组件相对应的DOM节点并将其插入DOM的过程称为安装。
请注意,通常您只会调用ReactDOM.render()挂载根组件。您无需手动“挂载”子组件。每当父组件调用setState(),并且其render方法说应首次渲染特定的子代时,React会自动将该子代“装载”到其父代中。
ReactDOM.render()
setState()