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

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

反饋

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

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

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

對(duì)于想學(xué)習(xí)React源碼的同學(xué)來(lái)說(shuō)，這同時(shí)是機(jī)遇與挑戰(zhàn)。

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

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

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

源碼為什么難懂

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

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

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

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

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

架構(gòu).png

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

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

模塊.png

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

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

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

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

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

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

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

從理念出發(fā)，你就會(huì)了解到：

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

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

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

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

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

同時(shí)為了保證理解沒有偏差，書中所有言論都來(lái)自React核心團(tuán)隊(duì)成員在公開場(chǎng)合的分享。

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