服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - React - React嵌套组件的构建顺序

React嵌套组件的构建顺序

2022-02-27 17:16夏花未眠 React

这篇文章主要介绍了React嵌套组件的构建顺序,帮助大家更好的理解和学习使用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

延伸 · 阅读

精彩推荐
  • ReactVite搭建React项目的方法步骤

    Vite搭建React项目的方法步骤

    这篇文章主要介绍了Vite搭建React项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面...

    Cookieboty5172022-02-24
  • ReactReact使用emotion写css代码

    React使用emotion写css代码

    这篇文章主要介绍了React如何使用emotion写css代码,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下...

    joychenke8192022-02-25
  • React编写简洁React组件的小技巧

    编写简洁React组件的小技巧

    这篇文章主要介绍了编写简洁React组件的小技巧,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下...

    KooFE前端团队7572022-02-25
  • React不用一行代码,搞懂React调度器原理

    不用一行代码,搞懂React调度器原理

    本文会讲解React调度器Scheduler的实现原理。知道你不喜欢看大段的代码,所以本文没有一行代码。文末有Scheduler的源码地址,感兴趣的话可以去看看。...

    魔术师卡颂10562021-12-26
  • React详解react setState

    详解react setState

    这篇文章主要介绍了react setState的相关资料,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下...

    一个前端王4942022-02-27
  • ReactReactRouter的实现方法

    ReactRouter的实现方法

    这篇文章主要介绍了ReactRouter的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    WindrunnerMax6202022-01-06
  • Reactreact hooks入门详细教程

    react hooks入门详细教程

    这篇文章主要介绍了react hooks入门详细教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考...

    抱素_6832022-02-23
  • React使用hooks写React组件需要注意的5个地方

    使用hooks写React组件需要注意的5个地方

    这篇文章主要介绍了使用hooks写React组件需要注意的5个地方,帮助大家更好的理解和学习使用React组件,感兴趣的朋友可以了解下...

    forrest酱8702022-02-24