在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> )} |
在上面两种写法中，第一种一定会报错
因为第一种的构建参数是
|
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
