我可以像这样定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello!</h1>;
}
}
当我想在Dom中渲染这个对象(或者更确切地说将它添加到虚拟DOM)时,我调用了
ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
这意味着在某些时候,由于我们在.render()
的return <h1>Hello!</h1>;
函数中定义了.render()
,因此多个Welcome
函数嵌套在彼此内部。这也意味着我可以使用.render()
方法将一个Object渲染到DOM并定义一个新的反应对象。
.render()
是否只是将内容呈现给虚拟DOM,而内部的React是否已解决嵌套问题,或者它背后是否有更多内容?
(更新以反映您的代码)
class Welcome extends React.Component {
render() {
return <h1>Hello!</h1>;
}
}
ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
ReactDOM.render()
元素称<Welcome />
。{}
作为道具调用Welcome组件。<h1>Hello!</h1>
元素作为结果。<h1>Hello</h1>
。阅读React Life Cycle可能是有益的。
要理解渲染,您必须了解反应如何在内部起作用。为了更详细地理解这一点,我会重新阅读this,但这里是一个快速概述:
从概念上讲,react组件只是一个返回Object的函数,如下所示:
{
type: 'button',
props: {...}
};
因此,类组件的render()
部分仅指定将返回组件的哪个部分。 react虚拟dom由许多嵌套在彼此内部的对象组成(在props.children中)。 React将从顶层对象开始,将其转换为html节点并将其渲染到dom,然后对其所有子节点执行相同操作。