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

應屆生小A：在學校用React + antd作事後臺管理系統，熟悉React技術棧。

兩年前端小B：公司技術棧是React，都用了一年了，我React賊六。

五年前端老C：帶團隊把公司的糞坑項目用React重構了。React對我來講就跟呼吸同樣容易。

小A、小B、老C：要不學學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. 身份難轉換

框架使用者和框架開發者視角徹底不一樣。

框架使用者主要關注業務實現，而框架開發者須要關注框架的設計理念如何落實。

問問本身，React的設計理念是什麼，你知道麼。

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

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

源碼該怎麼懂

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

1. 身份難轉換

讓咱們站在框架開發者角度看看React的設計理念：

React 是用 JavaScript 構建快速響應的大型 Web 應用程序的首選方式。

那麼什麼樣的架構才能支撐「快速響應」呢？什麼樣的代碼才能實現這套架構呢？

發現了麼，從「理念」到「代碼」，有三層抽象遞減的過程。

抽象下降          抽象下降
設計理念 -------> 框架架構 -------> 代碼實現 複製代碼

這就是爲何網上不少講React 代碼實現的教學讓人難以理解的緣由 —— 你根本不懂這些代碼背後實現的意義。

因此你須要從「理念」出發，理解了架構是如何設計的，才能懂代碼爲何這麼寫。

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

若是有一本講解源碼的書，每次只關注一個功能的實現（好比useState如何更新DOM，Diff算法如何執行），同時沒有大段大段的源碼演示。每一個功能再提供一個在線Demo讓我本身能調試一下這個功能實現的流程。

那想必是極好的。

能同時知足1和2的教學有麼？

有，這就是React技術揭祕

免費麼？開源的，只求一個star。Github地址

本書的宗旨是打造一本嚴謹、易懂的React源碼分析教程。

爲了達到這個目標，在行文上，本書會遵循：

• 不預設觀點 —— 全部觀點來自React核心團隊成員在公開場合發表的內容。

• 豐富的輔助資料 —— 包括在線Demo、文章視頻。

• 代碼剪枝 —— 講解流程時只關注流程相關的代碼，省略額外功能的干擾。

• 保持更新 —— 在React版本更新後會及時補充。當前版本v16.13.1開發版

阿姨，我還能再努力一把！！！

歡迎加我微信，拉你進 React源碼學習羣。