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

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

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

偏离一点点主题

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

// 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.createelement(renderchild, { val: a },react.createelement("div", null, a.b))
此时a还是undefined

第二种构建参数是

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嵌套组件的构建的资料请关注其它相关文章！