React組件什么時候render

開篇先來個提問：對於如下Demo，點擊Parent組件的div，觸發更新，Son組件會打印child render!么？

function Son() {
  console.log('child render!');
  return <div>Son</div>;
}


function Parent(props) {
  const [count, setCount] = React.useState(0);

  return (
    <div onClick={() => {setCount(count + 1)}}>
      count:{count}
      {props.children}
    </div>
  );
}


function App() {
  return (
    <Parent>
      <Son/>
    </Parent>
  );
}

const rootEl = document.querySelector("#root");
ReactDOM.render(<App/>, rootEl);

 

答案是“不會”

                                                                                                                                               不會    

render需要滿足的條件

React創建Fiber樹時，每個組件對應的fiber都是通過如下兩個邏輯之一創建的：

• render。即調用render函數，根據返回的JSX創建新的fiber。

• bailout。即滿足一定條件時，React判斷該組件在更新前后沒有發生變化，則復用該組件在上一次更新的fiber作為本次更新的fiber。

可以看到，當命中bailout邏輯時，是不會調用render函數的。

所以，Son組件不會打印child render!是因為命中了bailout邏輯。

bailout需要滿足的條件

什么情況下會進入bailout邏輯？當同時滿足如下4個條件時：

1. oldProps === newProps ？

即本次更新的props（newProps）不等於上次更新的props（oldProps）。

注意這里是全等比較。

我們知道組件render會返回JSX，JSX是React.createElement的語法糖。

所以render的返回結果實際上是React.createElement的執行結果，即一個包含props屬性的對象。

即使本次更新與上次更新props中每一項參數都沒有變化，但是本次更新是React.createElement的執行結果，是一個全新的props引用，所以oldProps !== newProps。

如果我們使用了PureComponent或Memo，那么在判斷是進入render還是bailout時，不會判斷oldProps與newProps是否全等，而是會對props內每個屬性進行淺比較。

2. context沒有變化

即context的value沒有變化。

3. workInProgress.type === current.type ？

更新前后fiber.type是否變化，比如div是否變為p。

4. !includesSomeLane(renderLanes, updateLanes) ？

當前fiber上是否存在更新，如果存在那么更新的優先級是否和本次整棵fiber樹調度的優先級一致？

如果一致則進入render邏輯。

就我們的Demo來說，Parent是整棵樹中唯一能觸發更新的組件（通過調用setCount）。

所以Parent對應的fiber是唯一滿足條件4的fiber。

Demo的詳細執行邏輯

所以，Demo中Son進入bailout邏輯，一定是同時滿足以上4個條件。我們一個個來看。

條件2，Demo中沒有用到context，滿足。

條件3，更新前后type都為Son對應的函數組件，滿足。

條件4，Son本身無法觸發更新，滿足。

所以，重點是條件1。讓我們詳細來看下。

本次更新開始時，Fiber樹存在如下2個fiber：

FiberRootNode
      |
  RootFiber      

其中FiberRootNode是整個應用的根節點，RootFiber是調用ReactDOM.render創建的fiber。

首先，RootFiber會進入bailout的邏輯，所以返回的App fiber和更新前是一致的。

FiberRootNode
      |
  RootFiber      
      |
  App fiber

 

由於App fiber是RootFiber走bailout邏輯返回的，所以對於App fiber，oldProps === newProps。並且bailout剩下3個條件也滿足。

所以App fiber也會走bailout邏輯，返回Parent fiber。

FiberRootNode
      |
  RootFiber      
      |
   App fiber
      |
 Parent fiber

由於更新是Parent fiber觸發的，所以他不滿足條件4，會走render的邏輯。

接下來是關鍵

如果render返回的Son是如下形式：

<Son/>

會編譯為

React.createElement(Son, null)

執行后返回JSX。

由於props的引用改變，oldProps !== newProps。會走render邏輯。

但是在Demo中Son是如下形式：

{props.children}

其中，props.children是Son對應的JSX，而這里的props是App fiber走bailout邏輯后返回的。

所以Son對應的JSX與上次更新時一致，JSX中保存的props也就一致，滿足條件1。

可以看到，Son滿足bailout的所有條件，所以不會render。

 

 

文章就分享到這，歡迎關注“前端大神之路”