App下載

如何學(xué)習(xí) React 源碼?

猿友 2020-10-27 12:05:36 瀏覽數(shù) (5861)
反饋

在不久前,v17.0.0-alpha.0 已經(jīng)合并入Reactmaster分支。

這意味著,并發(fā)模式(Concurrent Mode)離生產(chǎn)環(huán)境又進(jìn)了一步。

v15~v16重構(gòu)的Fiber架構(gòu),再到v16~v17新增的并發(fā)模式,React 已經(jīng)逐漸從UI庫變?yōu)樾⌒偷?code>操作系統(tǒng)。

對于想學(xué)習(xí)React源碼的同學(xué)來說,這同時是機(jī)遇挑戰(zhàn)

挑戰(zhàn)是:React內(nèi)部運行流程真的很復(fù)雜。

機(jī)遇是:學(xué)懂之后,即使除去前端領(lǐng)域的知識外,你的收獲將不限于:

  • 編程范式:函數(shù)式編程的代數(shù)效應(yīng)思想
  • 操作系統(tǒng):如何從零實現(xiàn)協(xié)程(可以理解為generator
  • 數(shù)據(jù)結(jié)構(gòu):鏈表、樹、小頂堆
  • 算法:O(n)的Diff算法、各種位運算
  • 瀏覽器運行機(jī)制

前端同學(xué)想擴(kuò)展自己的知識邊界,從學(xué)習(xí)React源碼下手是個不錯的選擇。

源碼為什么難懂

機(jī)遇可以看到,小到具體算法,大到編程思想,要了解源碼運行流程,需要學(xué)習(xí)很多前置知識。

我們調(diào)試一個庫的源碼,一般從他的入口函數(shù)開始debug。對于React來說,這個入口就是ReactDOM.render。

total.png

打印從ReactDOM.render執(zhí)行到視圖渲染過程的調(diào)用棧會發(fā)現(xiàn):這中間的調(diào)用流程非常復(fù)雜,甚至還有異步流程。

初學(xué)源碼的同學(xué)很容易陷入在源碼的汪洋大海中,從入門到放棄。

源碼該怎么學(xué)

如果將調(diào)用棧按功能劃分,可以分為三塊:

架構(gòu).png

分別對應(yīng)了源碼架構(gòu)中的三大模塊:

調(diào)度 - 協(xié)調(diào) - 渲染

模塊.png

所以,在學(xué)習(xí)具體代碼前,更好的方式是先了解React的架構(gòu)體系。

那么React為什么要這樣架構(gòu)呢?

我們作為開發(fā)者,在開發(fā)一個功能前會關(guān)注實現(xiàn)這個功能的目的——是為了更好的用戶體驗,還是商業(yè)化的目的?

同樣,React團(tuán)隊作為框架的開發(fā)者,在開發(fā)React前也會關(guān)注實現(xiàn)目的。這個目的,就是React的設(shè)計理念。

可以從官網(wǎng)React哲學(xué) 了解到,設(shè)計理念如下:

React 是用 JavaScript 構(gòu)建快速響應(yīng)的大型 Web 應(yīng)用程序的首選方式。

可見,React的設(shè)計初衷就是為了踐行快速響應(yīng)的理念。

理念出發(fā),你就會了解到:

  • 是什么在制約快速響應(yīng)?答:CPU的瓶頸與IO的瓶頸
  • 如何解決瓶頸?答:以并發(fā)的模式更新視圖
  • 為什么React要推出Fiber架構(gòu)?答:React15的架構(gòu)無法實現(xiàn)并發(fā)更新

總結(jié)

理念架構(gòu),從架構(gòu)實現(xiàn),這是符合大腦認(rèn)知的自頂向下的學(xué)習(xí)步驟。

這種方式固然好,但是需要總結(jié)大量的權(quán)威知識才能做到從理念實現(xiàn)都和React核心團(tuán)隊成員的想法一致。

為此,我寫了一本開源的電子書:

[React 技術(shù)揭秘 _blank](https://react.iamkasong.com/ )

完全按照自頂向下的模式講解React源碼。

同時為了保證理解沒有偏差,書中所有言論都來自React核心團(tuán)隊成員在公開場合的分享。

希望可以幫到想拓寬知識邊界的你,同時也希望能給個star

相關(guān)閱讀

作者:卡卡頌 來源:奇舞團(tuán)博客

0 人點贊