現(xiàn)有React架構(gòu)無(wú)法解決的問(wèn)題
大家好，我卡頌。
雖然主流前端框架都遵循：
- 狀態(tài)驅(qū)動(dòng)視圖
- 單向數(shù)據(jù)流
理論上并不存在某一框架可以實(shí)現(xiàn)，其他框架無(wú)法實(shí)現(xiàn)的特性。
但是，確實(shí)存在某些框架（比如Vue、Qwik）可以，但React無(wú)法解決的問(wèn)題。這就是「極致性能優(yōu)化」問(wèn)題。
本文來(lái)聊聊React性能優(yōu)化無(wú)法解決的問(wèn)題。
props下鉆
前端框架普遍遵循「單向數(shù)據(jù)流」。既然是單向數(shù)據(jù)流，那就存在跨組件傳遞props的情況。
這種情況被稱為「props下鉆」（props drilling）。
比如，在下面的應(yīng)用中：
- <App/>組件定義狀態(tài)number。
- <AGrandChild/>組件消費(fèi)number。
- <BGrandChild/>組件包含改變number的方法setNumber。
這種將props（這里的number）層層向下傳遞（從<App/>到<AGrandChild/>）的情況，就是「props下鉆」：
「props下鉆」是非常常見的場(chǎng)景。面對(duì)這種場(chǎng)景，React的性能怎么樣呢？
props下鉆的性能
思考一個(gè)問(wèn)題：對(duì)于上面的例子，當(dāng)調(diào)用<BGrandChild/>中的setNumber方法改變number后，哪些組件會(huì)重新render？
答案是：<App/>的所有子孫組件都會(huì)重新render。
這顯然與我們的預(yù)期不符。
直覺(jué)上看，起碼<B/>、<C/>及其子孫組件不應(yīng)該render，畢竟他們都不依賴number。
為了達(dá)到這個(gè)目標(biāo)，我們需要使用React.memo包裹<B/>、<C/>，這顯然會(huì)帶來(lái)額外的心智負(fù)擔(dān)。
為了減少開發(fā)者的心智負(fù)擔(dān)，在2021年的React Conf，黃玄帶來(lái)了React Forget編譯器，他能夠?yàn)楝F(xiàn)有業(yè)務(wù)代碼生成等效于useMemo、useCallback的代碼。
也就是說(shuō)，理想情況下，他能夠代替開發(fā)者完成React項(xiàng)目的性能優(yōu)化。
但是，回到我們的例子會(huì)發(fā)現(xiàn) —— 即使做了性能優(yōu)化，也無(wú)法達(dá)到最理想的狀態(tài)。
整個(gè)應(yīng)用中只有<AGrandChild/>消費(fèi)了number，理想情況下，當(dāng)number變化后，應(yīng)該只有<AGrandChild/>需要render。
但在React中，即使性能優(yōu)化后，<App/>與<AGrandChild/>沿途的組件也會(huì)render：
而默認(rèn)情況下（不優(yōu)化性能），整個(gè)應(yīng)用都會(huì)render：
造成這一問(wèn)題的原因在于 —— 對(duì)于任一狀態(tài)，React不知道哪些組件依賴他。
在「props下鉆」場(chǎng)景下，雖然<App/>與<AGrandChild/>沿途的組件僅僅是傳遞number（而不是依賴他），但React無(wú)從得知。
那如果明確的表示依賴關(guān)系，是不是能解決這個(gè)問(wèn)題呢？
比如，我們不使用props，而是在<App/>定義context number，再在<AGrandChild/>中消費(fèi)number：
遺憾的是，在React中context的實(shí)現(xiàn)也是依賴組件樹的遍歷（可以理解為React內(nèi)部實(shí)現(xiàn)的「props下鉆」），所以并不能解決這個(gè)問(wèn)題。
Signal
解決這個(gè)問(wèn)題的關(guān)鍵在于 —— 明確狀態(tài)與組件的依賴關(guān)系。
這種建立組件與狀態(tài)之間依賴關(guān)系的技術(shù)叫「響應(yīng)式更新」（熟悉Vue的同學(xué)應(yīng)該不陌生），也有些框架稱其為Signal。
應(yīng)用這種技術(shù)的框架（比如Vue、Qwik），當(dāng)狀態(tài)變化，只有依賴該狀態(tài)的組件會(huì)更新。
總結(jié)
正是由于React底層架構(gòu)的原因，導(dǎo)致應(yīng)用的性能優(yōu)化無(wú)法達(dá)到最理想的狀態(tài)。
這同時(shí)也是為什么React中有很多性能優(yōu)化API（比如React.memo、useMemo、 useCallback...），而采用Signal技術(shù)的框架沒(méi)有這些性能優(yōu)化API的原因。
