日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

 
 
 
  
  
  
function Son() {  
  
  
  
  console.log('child render!');  
  
  
  
  return 
Son
;  
  
  
  
}  
  
  
  
function Parent(props) {  
  
  
  
  const [count, setCount] = React.useState(0);  
  
  
  
  return (  
  
  
  
     {setCount(count + 1)}}>  
  
  
  
      count:{count}  
  
  
  
      {props.children}  
  
  
  
    

在線Demo地址[1]

 
 
 
  
  
  
右滑顯示答案：                                                                                                                                                 不會     
 
 

render需要滿足的條件

React創(chuàng)建Fiber樹時，每個組件對應(yīng)的fiber都是通過如下兩個邏輯之一創(chuàng)建的：

•  render。即調(diào)用render函數(shù)，根據(jù)返回的JSX創(chuàng)建新的fiber。
•  bailout。即滿足一定條件時，React判斷該組件在更新前后沒有發(fā)生變化，則復(fù)用該組件在上一次更新的fiber作為本次更新的fiber。

可以看到，當(dāng)命中bailout邏輯時，是不會調(diào)用render函數(shù)的。

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

bailout需要滿足的條件

什么情況下會進(jìn)入bailout邏輯？當(dāng)同時滿足如下4個條件時：

1. oldProps === newProps ？

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

注意這里是全等比較。

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

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

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

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

2. context沒有變化

即context的value沒有變化。

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

更新前后fiber.type是否變化，比如div是否變?yōu)閜。

4. !includesSomeLane(renderLanes, updateLanes) ？

當(dāng)前fiber上是否存在更新，如果存在那么更新的優(yōu)先級是否和本次整棵fiber樹調(diào)度的優(yōu)先級一致？

如果一致則進(jìn)入render邏輯。

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

所以Parent對應(yīng)的fiber是唯一滿足條件4的fiber。

Demo的詳細(xì)執(zhí)行邏輯

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

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

條件3，更新前后type都為Son對應(yīng)的函數(shù)組件，滿足。

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

所以，重點(diǎn)是條件1。讓我們詳細(xì)來看下。

本次更新開始時，F(xiàn)iber樹存在如下2個fiber：

 
 
 
  
  
  
FiberRootNode  
  
  
  
      |  
  
  
  
  RootFiber       
 
 

其中FiberRootNode是整個應(yīng)用的根節(jié)點(diǎn)，RootFiber是調(diào)用ReactDOM.render創(chuàng)建的fiber。

首先，RootFiber會進(jìn)入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觸發(fā)的，所以他不滿足條件4，會走render的邏輯。

接下來是關(guān)鍵

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

會編譯為

 
 
 
  
  
  
React.createElement(Son, null) 
 
 

執(zhí)行后返回JSX。

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

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

 
 
 
  
  
  
{props.children} 
 
 

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

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

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

總結(jié)

當(dāng)你理解這4個條件后，對于React組件更新會有全新的認(rèn)識。

不得不說，React真是太難了，打工人流下了不爭氣的眼淚。