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

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

反饋

在不久前，v17.0.0-alpha.0 已經(jīng)合并入React的master分支。

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

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

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

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

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

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

源碼為什么難懂

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

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

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

初學(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團隊作為框架的開發(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ā)，你就會了解到：

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

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

為此，我寫了一本開源的電子書：

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

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

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

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