React嵌套組件的構(gòu)建順序

更新時(shí)間：2021年04月10日 14:56:09 作者：夏花未眠

這篇文章主要介紹了React嵌套組件的構(gòu)建順序，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下

在React官網(wǎng)中，可以看到對(duì)生命周期的描述

這里有一個(gè)疑問(wèn)是，在嵌套組件中，是父組件先構(gòu)建，還是子組件先構(gòu)建？是子組件先更新，還是父組件先更新

解決這個(gè)問(wèn)題，可以從嵌套單個(gè)元素入手。下面是一個(gè)只有DOM元素的組件 Parent

function Parent(){
  return (
    <div>child</div>
  )
}

對(duì)于上面的元素，React會(huì)調(diào)用React.createElement創(chuàng)建一個(gè)對(duì)象，這就是子元素的構(gòu)建階段（這里使用的是babeljs.io/）

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

構(gòu)建之后就是渲染、更新

接著看下嵌套組件

function Child() {
  return <div>child</div>
}
function Parent(){
  return (
   <Child>parent child</Child>
  )
}

React會(huì)調(diào)用React.createElement，并傳入以下參數(shù)

function Child() {
  return React.createElement("div", null, "child");
}

function Parent() {
  return React.createElement(Child, null, "parent child");
}

這里我們看出父子組件的構(gòu)建過(guò)程，首先對(duì)當(dāng)前組件進(jìn)行構(gòu)建，接著進(jìn)入到組件中，繼續(xù)構(gòu)建，遵循的原則是從上到下

接著看看傳入多個(gè)組件

function Child() {
  return <div>child組件</div>
}
function Parent(){
  return (
    <div>
     <div>div元素</div>
     <Child />
    </div>
  )
}

在React.createElement會(huì)傳入以下參數(shù)

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

可以進(jìn)一步明確，子組件的構(gòu)建和父組件是分離的，并且是在父組件構(gòu)建之后創(chuàng)建的。所以父子組件的構(gòu)建順序是父組件constructor，render子組件constructor，render

當(dāng)子組件render完成后，會(huì)調(diào)用componentDidMount

構(gòu)建總結(jié)

在多組件情況下，首先父元素constructor，進(jìn)行初始化和開(kāi)始掛載，接著調(diào)用render

對(duì)于DOM元素，會(huì)立即創(chuàng)建，對(duì)于React組件，會(huì)在之后進(jìn)入到組件中，重復(fù)之前的constructor，構(gòu)建，render,直到最后一個(gè)子元素

當(dāng)最后一個(gè)子組件render完成后，會(huì)調(diào)用componentDidMount。也就是元素已經(jīng)掛載完成。之后會(huì)層層向上，依次調(diào)用componentDidMount

偏離一點(diǎn)點(diǎn)主題

下面的代碼可以輔助理解上面的內(nèi)容

// RenderChild的作用是，當(dāng)接收到值時(shí)，渲染children，沒(méi)有值時(shí)，渲染其他元素

function RenderChild(props){
  return (
    props.a ? props.children : <div>aaaa</div>
  )
}

寫(xiě)法一（直接渲染DOM元素）：
function Parent(){
  let a = undefined;
  setTimeout(() => {
    a = { b: 1 };
  });
  return (
    <RenderChild val={a}>
      <div>{a.b}</div>
    </RenderChild>
  )
}

寫(xiě)法二(渲染組件)：
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>
  )
}

在上面兩種寫(xiě)法中，第一種一定會(huì)報(bào)錯(cuò)

因?yàn)榈谝环N的構(gòu)建參數(shù)是

React.createElement(RenderChild, { val: a },React.createElement("div", null, a.b))
此時(shí)a還是undefined

第二種構(gòu)建參數(shù)是

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
 }));

因?yàn)镃hild的構(gòu)建是在RenderChild之后的，所以即使在Child中使用到了不存在的值，也不會(huì)報(bào)錯(cuò)