React 源碼解析之嘮叨兩句

幹嗎學習源碼

• 更好地幫你理解本身寫的代碼是如何運行的；
• 遇到 bug 時，能幫你從底層去思考並解決問題；
• 在開始一個新項目以前，想好更好的架構方式；
• React 設計細節都是很高明的，學習它有助於提高自身編碼能力；
• 互聯網寒冬期間，熟悉並能夠精通某個技能，可大大提高本身的競爭力，成爲升職加薪的基礎；

React 特點

無比純粹

它是一個很是純粹 UI = fn(x) 的框架，經過 state 映射 UI 的方式來屏蔽 DOM 操做，業界的框架也大抵如此。爲何說 React 純粹呢？那是由於的 api 設計，核心 api 就是 setState，其他主要內容都圍繞組件化來設置，沒有 React 雙向綁定以及其餘 api，要改變一個 UI 只能經過 setState 來改變狀態，這就成爲了 React 無比純粹的開發體驗。

思想超前

React16 版本是徹底重寫了 React 代碼，可是對於使用者來講是無感知的，光這一點就優秀無比了，不像 vue 或 angular 更新大版本須要調整兼容。更優秀的還在後面，React16 版本引入了Fiber概念，從根本上解決了 js 單線程運行問題。就好比計算量過大，就可能致使動畫卡針和交互卡頓等問題。

章節目錄部署

第一章 React API

• createElement;
• createContext;
• JSX => JS;
• ConcurrentMode;
• Ref;
• Component;
• Suspense;
• Hooks;

第二章 React 建立更新

• ReactDom.render;
• Fiber;
• UpdateQueue;
• FiberRoot;
• expirationTime;

第三章 React 調度過程(Fiber Scheduler)

• scheduleWork;
• batchedUpdates;
• performWork;
• performUnitOfWork;
• requestWork;
• react scheduler;
• renderRoot;

第四章 React 開始更新

• beginWork 以及優化;
• 各種組件的更新過程;
• 調和子節點的過程;

第五章 React 更新後的操做

• completeUnitOfWork;
• completeWork;
• unwindWork;
• 虛擬 DOM 對比;
• 錯誤捕獲處理;
• 完成整棵樹更新;

第六章 提交更新，UI 更新

• commitRoot 總體流程;
• 提交快照;
• 提交 DOM 更新;
• 提交全部聲明週期;
• 開發時的幫助方法;
• 提交 DOM 插入;
• 提交 DOM 刪除;

第七章 各類功能的實現過程

• context 的實現過程;
• ref 的實現過程;
• hydrate 的實現過程;
• React 的事件體系;

第八章 Suspense

• 更新優先級的概念
• Suspense 組件更新
• retry 從新嘗試渲染
• 更新掛起的概念
• timeout 處理
• lazy 組件更新

Hooks

• 核心原理
• useState
• useEffect
• useContext
• 其餘 Hooks API

重點篇幅

• Fiber
• Update
• Scheduler
• React.Children.map
• ...

後面會附流程圖輔助學習

須要你作什麼

• 足夠耐心：React 的 Fiber 重構先後花了 3 年，看源碼不會 3 周就看完了，因此你要有足夠耐心；
• 思考再思考：自我驗證；
• 善於提問和記筆記：不要留着問題不解決，由於終有一天你仍是碰到它；

通讀源碼意義所在

外在	內在
提升開發能力	提升學習能力
解決問題能力	提升思考能力
提高自身價值	提高設計能力

適合人羣

• React 開發者
• 想要參與開源項目
• 想要成爲高級開發

你能夠...

下一篇：React 源碼解析之總覽