日本a在线,在线日韩成人,999这里只有是极品

在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嵌套組件的構建順序

因為第一種的構建參數是

				?

									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

									 }));