本篇內(nèi)容主要講解“React組件什么時候render”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React組件什么時候render”吧!
創(chuàng)新互聯(lián)建站2013年至今，先為固安等服務(wù)建站，固安等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為固安企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
對于如下Demo，點擊Parent組件的div，觸發(fā)更新，Son組件會打印child render!么？
重慶分公司
重慶分公司
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樹時，每個組件對應的fiber都是通過如下兩個邏輯之一創(chuàng)建的：
render。即調(diào)用render函數(shù)，根據(jù)返回的JSX創(chuàng)建新的fiber。
bailout。即滿足一定條件時，React判斷該組件在更新前后沒有發(fā)生變化，則復用該組件在上一次更新的fiber作為本次更新的fiber。
可以看到，當命中bailout邏輯時，是不會調(diào)用render函數(shù)的。
所以，Son組件不會打印child render!是因為命中了bailout邏輯。
bailout需要滿足的條件
什么情況下會進入bailout邏輯？當同時滿足如下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，那么在判斷是進入render還是bailout時，不會判斷oldProps與newProps是否全等，而是會對props內(nèi)每個屬性進行淺比較。
2. context沒有變化
即context的value沒有變化。
3. workInProgress.type === current.type ？
更新前后fiber.type是否變化，比如div是否變?yōu)閜。
4. !includesSomeLane(renderLanes, updateLanes) ？
當前fiber上是否存在更新，如果存在那么更新的優(yōu)先級是否和本次整棵fiber樹調(diào)度的優(yōu)先級一致？
如果一致則進入render邏輯。
就我們的Demo來說，Parent是整棵樹中唯一能觸發(fā)更新的組件（通過調(diào)用setCount）。
所以Parent對應的fiber是唯一滿足條件4的fiber。
Demo的詳細執(zhí)行邏輯
所以，Demo中Son進入bailout邏輯，一定是同時滿足以上4個條件。我們一個個來看。
條件2，Demo中沒有用到context，滿足。
條件3，更新前后type都為Son對應的函數(shù)組件，滿足。
條件4，Son本身無法觸發(fā)更新，滿足。
所以，重點是條件1。讓我們詳細來看下。
本次更新開始時，F(xiàn)iber樹存在如下2個fiber：
FiberRootNode | RootFiber
其中FiberRootNode是整個應用的根節(jié)點，RootFiber是調(diào)用ReactDOM.render創(chuàng)建的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觸發(fā)的，所以他不滿足條件4，會走render的邏輯。
接下來是關(guān)鍵
如果render返回的Son是如下形式：
會編譯為
React.createElement(Son, null)
執(zhí)行后返回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。
到此，相信大家對“React組件什么時候render”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！
