反应中嵌套组件的构建顺序是什么

　　介绍

这篇文章将为大家详细讲解有关反应中嵌套组件的构建顺序是什么,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

function 父(){ 　　return 才能; 　　,,,& lt; div> child

　　,,) 　　}

对于上面的元素,反应会调用React.createElement创建一个对象,这就是子元素的构建阶段(这里使用的是babeljs。io/)

React.createElement (“div",,空,,“child")

构建之后就是渲染,更新

接着看下嵌套组件

function 孩子(),{ 　　return 才能;& lt; div> child

　　} 　　function 父(){ 　　return 才能; 　　,,& lt; Child> parent child 　　,,) 　　}

反应会调用反应。createElement,并传入以下参数

function 孩子(),{ 　　return 才能;React.createElement (“div",,空,,“child"); 　　} 　　　　function 父(),{ 　　return 才能;React.createElement(孩子,,空,,“parent child"); 　　}

这里我们看出父子组件的构建过程,首先对当前组件进行构建,接着进入到组件中,继续构建,遵循的原则是从上到下

接着看看传入多个组件

function 孩子(),{ 　　return 才能;& lt; div>孩子组件& lt;/div> 　　} 　　function 父(){ 　　return 才能; 　　,,,& lt; div> 　　,,,,& lt; div> div元素& lt;/div> 　　,,,,& lt; Child /比; 　　,,,& lt;/div> 　　,,) 　　}

在反应。createElement会传入以下参数

React.createElement (“div",,空,,React.createElement (“div",,空,,“div \ u5143 \ u7D20"), React.createElement(孩子,,null)) 　　React.createElement (“div", null,,“孩子\ u7EC4 \ u4EF6")

可以进一步明确,子组件的构建和父组件是分离的,并且是在父组件构建之后创建的,所以父子组件的构建顺序是父组件构造函数,使子组件构造函数,呈现

当子组件渲染完成后,会调用componentDidMount

构建总结

在多组件情况下,首先父元素构造函数,进行初始化和开始挂载,接着调用

对呈现于DOM元素,会立即创建,对于反应组件,会在之后进入到组件中,重复之前的构造函数,构建,渲染,直到最后一个子元素

当最后一个子组件渲染完成后,会调用componentDidMount。也就是元素已经挂载完成。之后会层层向上,依次调用componentDidMount

偏离一点点主题

下面的代码可以辅助理解上面的内容

//, RenderChild的作用是,当接收到值时,渲染的孩子,没有值时,渲染其他元素　　　　function RenderChild(道具){ 　　return 才能; 　　,,,props.a ?, props.children :, & lt; div> aaaa

　　,,) 　　} 　　　　写法一(直接渲染DOM元素): 　　function 父(){ 　　let 才能;a =,定义; 　　setTimeout(才能(),=祝辞,{ 　　,,,a =, {, b: 1,}; 　　,,}); 　　return 才能; 　　,,,& lt; RenderChild val={一}比; 　　,,,,,& lt; div> {a.b} & lt;/div> 　　,,,& lt;/RenderChild> 　　,,) 　　} 　　　　写法二(渲染组件): 　　function 孩子(道具),{ 　　return 才能;& lt; div> {props.a.b} & lt;/div> 　　} 　　　　function 父(){ 　　const 才能;a =,定义; 　　setTimeout(才能(),=祝辞,{ 　　,,,a =, {, b: 1,}; 　　,,}); 　　return 才能; 　　,,,& lt; RenderChild val={一}比; 　　,,,,,& lt; Child childVal={一},/比; 　　,,,& lt;/RenderChild> 　　,,) 　　}

在上面两种写法中,第一种一定会报错

反应中嵌套组件的构建顺序是什么