个人中心
gpt4 book ai didi

React嵌套组件的构建顺序

转载 作者：qq735679552 更新时间：2022-09-28 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章React嵌套组件的构建顺序由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

在React官网中，可以看到对生命周期的描述

React嵌套组件的构建顺序

这里有一个疑问是，在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新 。

解决这个问题，可以从嵌套单个元素入手。下面是一个只有DOM元素的组件 Parent 。

?
1
2
3
4
5
function Parent(){
   return (
     <div>child</div>
   )
}

对于上面的元素，React会调用React.createElement创建一个对象，这就是子元素的构建阶段（这里使用的是babeljs.io/） 。

?
1
React.createElement( "div" , null , "child" )

构建之后就是渲染、更新 。

接着看下嵌套组件

?
1
2
3
4
5
6
7
8
function Child() {
   return <div>child</div>
}
function Parent(){
   return (
    <Child>parent child</Child>
   )
}

React会调用React.createElement，并传入以下参数 。

?
1
2
3
4
5
6
7
function Child() {
   return React.createElement( "div" , null , "child" );
}
 
function Parent() {
   return React.createElement(Child, null , "parent child" );
}

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

接着看看传入多个组件

?
1
2
3
4
5
6
7
8
9
10
11
function Child() {
   return <div>child组件</div>
}
function Parent(){
   return (
     <div>
      <div>div元素</div>
      <Child />
     </div>
   )
}

在React.createElement会传入以下参数 。

?
1
2
React.createElement( "div" , null , React.createElement( "div" , null , "div\u5143\u7D20" ),React.createElement(Child, null ))
React.createElement( "div" , null , "child\u7EC4\u4EF6" )

可以进一步明确，子组件的构建和父组件是分离的，并且是在父组件构建之后创建的。所以父子组件的构建顺序是父组件constructor，render子组件constructor，render 。

当子组件render完成后，会调用componentDidMount 。

构建总结

在多组件情况下，首先父元素constructor，进行初始化和开始挂载，接着调用render 。

对于DOM元素，会立即创建，对于React组件，会在之后进入到组件中，重复之前的constructor，构建，render,直到最后一个子元素 。

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

偏离一点点主题

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// RenderChild的作用是，当接收到值时，渲染children，没有值时，渲染其他元素
 
function RenderChild(props){
   return (
     props.a ? props.children : <div>aaaa</div>
   )
}
 
写法一（直接渲染DOM元素）：
function Parent(){
   let a = undefined;
   setTimeout(() => {
     a = { b: 1 };
   });
   return (
     <RenderChild val={a}>
       <div>{a.b}</div>
     </RenderChild>
   )
}
 
写法二(渲染组件)：
function Child(props) {
   return <div>{props.a.b}</div>
}
 
function Parent(){
   const a = undefined;
   setTimeout(() => {
     a = { b: 1 };
   });
   return (
     <RenderChild val={a}>
       <Child childVal={a} />
     </RenderChild>
   )
}

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

React嵌套组件的构建顺序

因为第一种的构建参数是 。

?
1
2
React.createElement(RenderChild, { val: a },React.createElement( "div" , null , a.b))
此时a还是undefined

第二种构建参数是 。

?
1
2
3
4
5
6
7
8
9
10
function RenderChild(props) {
   return props.val ? props.children : React.createElement( "div" , null , "aaaa" );
}
 
function Child(props) {
   return React.createElement( "div" , null , props.value.b);
}
React.createElement(RenderChild, { val: a }, React.createElement(Child, {
     value: a
  }));

因为Child的构建是在RenderChild之后的，所以即使在Child中使用到了不存在的值，也不会报错 。

最后总结

1. React组件的构建和开始挂载是从根元素到子元素的，因此数据流是从上到下的，挂载完成和状态的更新是从子元素到根元素，此时可以将最新状态传给根元素 。

2. 组件和DOM元素的一个区别是，DOM元素会在当前位置创建，而React组件的构建渲染具有层级顺序 。

以上就是React嵌套组件的构建顺序的详细内容，更多关于React嵌套组件的构建的资料请关注我其它相关文章！ 。

原文链接：https://juejin.cn/post/6949372925732454437 。

最后此篇关于React嵌套组件的构建顺序的文章就讲到这里了,如果你想了解更多关于React嵌套组件的构建顺序的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： JavaScript自定义插件实现tabs切换功能
文章推荐： js实现一个简易的计算器
文章推荐： 详解React中的不可变值
文章推荐： 详解react setState
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com