應屆生：阿姨,我不想努力了在學校用React + antd做過後臺管理系統，熟悉React技術棧。兩年前端：公司技術棧是React，都用了一年了，我React賊六。五年前端：帶團隊把公司的糞坑項目用React重構了。React對我來說就跟呼吸一樣容易。：要不學學React源碼吧。......%……& ...
應屆生：阿姨,我不想努力了
在學校用React + antd做過後臺管理系統，熟悉React技術棧。
兩年前端：公司技術棧是React，都用了一年了，我React賊六。
五年前端：帶團隊把公司的糞坑項目用React重構了。React對我來說就跟呼吸一樣容易。
：要不學學React源碼吧。
......
%……&（&……% ，怎麼這麼難懂，阿姨，我不想努力了。
明確學習目的
考慮下，你的學習目的是：
- 真的想學
React源碼。 - 只想理解
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文檔書籍教程，可以直接分享給你們。
其實，造成大家不想努力的原因可以歸結為兩點：
- 身份難轉換
框架使用者和框架開發者視角完全不同。
框架使用者主要關註業務實現，而框架開發者需要關註框架的設計理念如何落實。
問問自己，React的設計理念是什麼，你知道麽。
- 大量功能堆砌在流程中無法分離
即使你只想關註某個功能點（比如ReactDOM.render如何渲染頁面）。但大量功能實現的代碼也是耦合在這個流程中的，調試時很容易陷入源碼的汪洋大海。
源碼該怎麼懂
我們來分別看看兩個難點如何解決。
- 身份難轉換
讓我們站在框架開發者角度看看React的設計理念：
React 是用 JavaScript 構建快速響應的大型 Web 應用程式的首選方式。
那麼什麼樣的架構才能支撐“快速響應”呢？什麼樣的代碼才能實現這套架構呢？
發現了麽，從“理念”到“代碼”，有三層抽象遞減的過程。
這就是為什麼網上很多講React 代碼實現的教學讓人難以理解的原因 —— 你根本不懂這些代碼背後實現的意義。
所以你需要從“理念”出發，理解了架構是如何設計的，才能懂代碼為什麼這麼寫。
- 大量功能堆砌在流程中無法分離
如果有一本講解源碼的書，每次只關註一個功能的實現（比如useState如何更新DOM，Diff演算法如何執行），同時沒有大段大段的源碼演示。每個功能再提供一個線上Demo讓我自己能調試一下這個功能實現的流程。
那想必是極好的。
能同時滿足1和2的教學有麽？
有，這就是React技術揭秘
免費麽？開源的，只求一個star。Github地址
本書的宗旨是打造一本嚴謹、易懂的React源碼分析教程。
為了達到這個目標，在行文上，本書會遵循：
- 不預設觀點 —— 所有觀點來自React核心團隊成員在公開場合發表的內容。
- 豐富的輔助資料 —— 包括線上Demo、文章視頻。
- 代碼剪枝 —— 講解流程時只關註流程相關的代碼，省略額外功能的干擾。
保持更新 —— 在React版本更新後會及時補充。當前版本v16.13.1開發版
阿姨，我還能再努力一把！！！
