如何學習React源碼
在不久前， v17.0.0-alpha.0 已經合併入 React 的 master 分支。
這意味着，併發模式（ Concurrent Mode ）離生產環境又進了一步。
從 v15～v16 重構的 Fiber架構 ，再到 v16～v17 新增的 併發模式 ， React 已經逐漸從 UI庫 變爲小型的 操作系統 。
對於想學習 React 源碼的同學來說，這同時是 機遇 與 挑戰 。
挑戰是： React 內部運行流程真的很複雜。
機遇是：學懂之後，即使除去 前端領域 的知識外，你的收穫將不限於：
-
編程範式：函數式編程的
代數效應思想 -
操作系統：如何從零實現
協程（可以理解爲generator） -
數據結構：鏈表、樹、小頂堆
-
算法：O(n)的Diff算法、各種位運算
-
瀏覽器運行機制
前端同學想擴展自己的知識邊界，從學習 React 源碼下手是個不錯的選擇。
源碼爲什麼難懂
從 機遇 可以看到，小到具體 算法 ，大到 編程思想 ，要了解源碼運行流程，需要學習很多前置知識。
我們調試一個庫的源碼，一般從他的入口函數開始 debug 。對於 React 來說，這個入口就是 ReactDOM.render 。
打印從 ReactDOM.render 執行到 視圖渲染 過程的調用棧會發現：這中間的調用流程非常複雜，甚至還有異步流程。
初學源碼的同學很容易陷入在源碼的汪洋大海中，從入門到放棄。
源碼該怎麼學
如果將調用棧按功能劃分，可以分爲三塊：
分別對應了源碼架構中的三大模塊：
調度 - 協調 - 渲染
所以，在學習具體代碼前，更好的方式是先了解 React 的架構體系。
那麼 React 爲什麼要這樣架構呢？
我們作爲開發者，在開發一個功能前會關注實現這個功能的目的——是爲了更好的用戶體驗，還是商業化的目的？
同樣， React 團隊作爲框架的開發者，在開發 React 前也會關注實現目的。這個目的，就是 React 的設計理念。
可以從 官網React哲學 瞭解到，設計理念如下：
React 是用 JavaScript 構建 快速響應 的大型 Web 應用程序的首選方式。
可見， React 的設計初衷就是爲了踐行 快速響應 的理念。
從 理念 出發，你就會了解到：
-
是什麼在制約
快速響應？答：CPU的瓶頸與IO的瓶頸 -
如何解決瓶頸？答：以
併發的模式更新視圖 -
爲什麼
React要推出Fiber架構？答：React15的架構無法實現併發更新
總結
從 理念 到 架構 ，從 架構 到 實現 ，這是符合大腦認知的自頂向下的學習步驟。
這種方式固然好，但是需要總結大量的權威知識才能做到從 理念 到 實現 都和 React 核心團隊成員的想法一致。
爲此，我寫了一本開源的電子書：
完全按照 自頂向下 的模式講解 React 源碼。
同時爲了保證理解沒有偏差，書中所有言論都來自 React 核心團隊成員在公開場合的分享。
希望可以幫到想拓寬知識邊界的你，同時也希望能給個 star 。
