React嵌套组件中父组件和子组件哪个先建设？

这篇文章介绍的是React嵌套组件构建顺序的问题，究竟在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新呢？接下来小编就与大家一起来探讨一下。
 
在React官网中，可以看到对生命周期的描述
 
 
在嵌套组件中，是父组件先构建，还是子组件先构建？是子组件先更新，还是父组件先更新解决这个问题，可以从嵌套单个元素入手。下面是一个只有DOM元素的组件 Parent
 
function Parent(){
  return (
    <div>child</div>
  )
}
对于上面的元素，React会调用React.createElement创建一个对象，这就是子元素的构建阶段（这里使用的是babeljs.io/）
 
React.createElement("div", null, "child")
构建之后就是渲染、更新
 
接着看下嵌套组件
function Child() {
  return <div>child</div>
}
function Parent(){
  return (
   <Child>parent child</Child>
  )
}
React会调用React.createElement，并传入以下参数
 
function Child() {
  return React.createElement("div", null, "child");
}
 
function Parent() {
  return React.createElement(Child, null, "parent child");
}
这里我们看出父子组件的构建过程，首先对当前组件进行构建，接着进入到组件中，继续构建，遵循的原则是从上到下
 
接着看看传入多个组件
function Child() {
  return <div>child组件</div>
}
function Parent(){
  return (
    <div>
     <div>div元素</div>
     <Child />
    </div>
  )
}
在React.createElement会传入以下参数
 
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
 
 
偏离一点点主题
下面的代码可以辅助理解上面的内容
 
// 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>
  )