阿姨，React源碼好難懂，我不想努力了

應屆生：阿姨,我不想努力了
在學校用React + antd作事後臺管理系統，熟悉React技術棧。
兩年前端：公司技術棧是React，都用了一年了，我React賊六。
五年前端：帶團隊把公司的糞坑項目用React重構了。React對我來講就跟呼吸同樣容易。
：要不學學React源碼吧。
......
%……&（&……% ，怎麼這麼難懂，阿姨，我不想努力了。

明確學習目的
考慮下，你的學習目的是：

1. 真的想學React源碼。
2. 只想理解React的大致工做流程，瞭解一些常常被大佬們提起的名詞（好比Diff算法、Fiber架構、時間切片），好和麪試官吹水。

若是是2，向你推薦一篇mini教程build-your-own-react，包教包會，誰用誰知道。同時你能夠關閉這篇文章了。

若是是1，那咱們接着往下看。

源碼爲何難懂
你決定首先看看源碼的目錄
滿懷信心的打開facebook/react倉庫下的packages目錄，印入眼簾的是一屏翻不完的20+文件夾。
你據說React的主要調度邏輯在react-reconciler目錄下，你輕點鼠標，印入眼簾的大概有80+文件。
怎麼這麼多，阿姨，我不想努力了。
你聽別人說看源碼要從第一個commit看起
你翻頁翻斷了手指，終於找到13年的commit。

這和如今的React（v16.13.1）差了10w個版本，早就重構三輪了。
怎麼變化這麼快，阿姨，我不想努力了。
你決定從ReactDOM.render開始debug
全部React應用都是經過ReactDOM.render建立的，那麼從入口一直debug到頁面更新不就是整個流程了麼。
你一步一步向下調試，一分鐘過去了，流程還沒走完。你發現流程裏有不少異步調用，連debug到哪了都不知道。
怎麼這麼複雜，阿姨，我不想努力了。
你決定找現成的教學
先搜搜免費的，一搜搜出一大堆。怎麼一來就是貼大段大段代碼。我就是不懂React是如何執行的，你上來就給我貼React內執行部的代碼？
再搜搜收費的，嗯，幾百大洋，爲了學源碼，我忍。但是爲何講的代碼和當前React版本差這麼多啊？
怎麼這麼難，阿姨，我不想努力了。

 

1 目前，我也組建了一個自學羣，能夠一塊兒討論研究前端的各個事宜，以及提升能力的方法，只要你想了解前端，精通前端，都歡迎大家加入咱們的前端自學。
2 你能夠找到志同道合的朋友，相互激勵的學習夥伴，還能獲得大神的經驗分享，和加入項目實戰的機會。這是個人WEB前端q裙。---851231348
3 整理了-套最新的前端基礎教程，學習前端的這個過程中我也收集了不少前端學習手冊，面試題，開發工具，PDF文檔書籍教程，能夠直接分享給大家。

其實，形成你們不想努力的緣由能夠歸結爲兩點：

1. 身份難轉換

框架使用者和框架開發者視角徹底不一樣。
框架使用者主要關注業務實現，而框架開發者須要關注框架的設計理念如何落實。
問問本身，React的設計理念是什麼，你知道麼。

1. 大量功能堆砌在流程中沒法分離

即便你只想關注某個功能點（好比ReactDOM.render如何渲染頁面）。但大量功能實現的代碼也是耦合在這個流程中的，調試時很容易陷入源碼的汪洋大海。

源碼該怎麼懂

咱們來分別看看兩個難點如何解決。

1. 身份難轉換

讓咱們站在框架開發者角度看看React的設計理念：
React 是用 JavaScript 構建快速響應的大型 Web 應用程序的首選方式。

那麼什麼樣的架構才能支撐「快速響應」呢？什麼樣的代碼才能實現這套架構呢？
發現了麼，從「理念」到「代碼」，有三層抽象遞減的過程。

這就是爲何網上不少講React 代碼實現的教學讓人難以理解的緣由 —— 你根本不懂這些代碼背後實現的意義。
因此你須要從「理念」出發，理解了架構是如何設計的，才能懂代碼爲何這麼寫。

1. 大量功能堆砌在流程中沒法分離

若是有一本講解源碼的書，每次只關注一個功能的實現（好比useState如何更新DOM，Diff算法如何執行），同時沒有大段大段的源碼演示。每一個功能再提供一個在線Demo讓我本身能調試一下這個功能實現的流程。
那想必是極好的。
能同時知足1和2的教學有麼？
有，這就是React技術揭祕
免費麼？開源的，只求一個star。Github地址
本書的宗旨是打造一本嚴謹、易懂的React源碼分析教程。
爲了達到這個目標，在行文上，本書會遵循：

• 不預設觀點 —— 全部觀點來自React核心團隊成員在公開場合發表的內容。
• 豐富的輔助資料 —— 包括在線Demo、文章視頻。
• 代碼剪枝 —— 講解流程時只關注流程相關的代碼，省略額外功能的干擾。

保持更新 —— 在React版本更新後會及時補充。當前版本v16.13.1開發版阿姨，我還能再努力一把！！！