這篇文章主要講解了“React組件在什么時(shí)候render”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React組件在什么時(shí)候render”吧！

站在用戶的角度思考問題，與客戶深入溝通，找到鐵力網(wǎng)站設(shè)計(jì)與鐵力網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鐵力地區(qū)。

對(duì)于如下Demo，點(diǎn)擊Parent組件的div，觸發(fā)更新，Son組件會(huì)打印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);

在線Demo地址[1]

?右滑顯示答案：                                                                                                                                                 不會(huì)

render需要滿足的條件
React創(chuàng)建Fiber樹時(shí)，每個(gè)組件對(duì)應(yīng)的fiber都是通過如下兩個(gè)邏輯之一創(chuàng)建的：

• render。即調(diào)用render函數(shù)，根據(jù)返回的JSX創(chuàng)建新的fiber。

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

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

所以，Son組件不會(huì)打印child render!是因?yàn)槊辛薭ailout邏輯。

bailout需要滿足的條件
什么情況下會(huì)進(jìn)入bailout邏輯？當(dāng)同時(shí)滿足如下4個(gè)條件時(shí)：

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

注意這里是全等比較。

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

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

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

如果我們使用了PureComponent或Memo，那么在判斷是進(jìn)入render還是bailout時(shí)，不會(huì)判斷oldProps與newProps是否全等，而是會(huì)對(duì)props內(nèi)每個(gè)屬性進(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)先級(jí)是否和本次整棵fiber樹調(diào)度的優(yōu)先級(jí)一致？

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

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

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

Demo的詳細(xì)執(zhí)行邏輯
所以，Demo中Son進(jìn)入bailout邏輯，一定是同時(shí)滿足以上4個(gè)條件。我們一個(gè)個(gè)來看。

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

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

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

所以，重點(diǎn)是條件1。讓我們?cè)敿?xì)來看下。

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

FiberRootNode       |   RootFiber

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

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

FiberRootNode       |   RootFiber             |   App fiber

由于App fiber是RootFiber走bailout邏輯返回的，所以對(duì)于App fiber，oldProps === newProps。并且bailout剩下3個(gè)條件也滿足。

所以App fiber也會(huì)走bailout邏輯，返回Parent fiber。

FiberRootNode       |   RootFiber             |    App fiber       |  Parent fiber

由于更新是Parent fiber觸發(fā)的，所以他不滿足條件4，會(huì)走render的邏輯。

接下來是關(guān)鍵

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

<Son/>

會(huì)編譯為

React.createElement(Son, null)

執(zhí)行后返回JSX。

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

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

{props.children}

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

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

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

感謝各位的閱讀，以上就是“React組件在什么時(shí)候render”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)React組件在什么時(shí)候render這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前標(biāo)題：React組件在什么時(shí)候render
URL標(biāo)題：http://jinyejixie.com/article26/jjhocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、域名注冊(cè)、網(wǎng)站收錄、服務(wù)器托管、小程序開發(fā)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)