如何學習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技術揭祕(https://react.iamkasong.com)

徹底按照自頂向下的模式講解React源碼。

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

但願能夠幫到想拓寬知識邊界的你，同時也但願能給個star。

點擊閱讀原文直接閱讀本書

歷史精選文章

如何學習源碼 | 如何高效學習一個新知識
爲何要學習源碼，怎麼學習？
我在阿里招前端，我該怎麼幫你？（文末有福利）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何作出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，作的項目沒什麼技術含量，怎麼辦？

最後

通常人都看不到文章末尾，看到這裏你已經超越90%的人了。

1. 關注個人公衆號 若川視野，回覆" pdf" 領取前端優質書籍pdf
2. 個人博客地址： https://lxchuan12.cn 歡迎收藏
3. 以爲文章不錯，能夠點個在看呀^_^另外歡迎留言交流～

小提醒：若川視野公衆號源碼系列等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀。

本文分享自微信公衆號 - 若川視野（lxchuan12-wx）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。