React16源碼解析

React16源碼解析

git倉庫地址：https://github.com/jianjiache...

目錄結構

├──packages(帶註釋的React16.8源碼來源yck)

├── src（模擬實現React15）

│ ├── index.js

│ ├── react

│ │ ├── component.js

│ │ ├── createElement.js

│ │ ├── enqueueSetState.js

│ │ └── index.js

│ └── react-dom

│ ├── diff-兩顆虛擬樹.js

│ ├── diff.js

│ ├── patch-差別更新到真實樹.js

│ └── render.js

└── 學習筆記

├── React-bable編譯Jsx.md

├── React-組件元素實例與Jsx語法.md

├── React15diff算法模擬實現.md

├── React15diff算法策略.md

├── React15實現思路.md

├── React16源碼解析1-瞭解Fiber.md

├── React16源碼解析2-渲染幀與requestIdleCallback.md

├── React16源碼解析3-Scheduler任務調度器.md

├── React16源碼解析4-Render流程.md

└── React16源碼解析5-setState同步異步本質.md

說明

這是一個用來深刻學習react源碼和模擬實現部分react的項目，僅供學習使用，網上有不少源碼的分析文章可是都說的不大全面，只看一兩篇的話很難理清Fiber架構，這裏的部分筆記和代碼是對不少優秀文章的總結，部分並不是原創，有的地方僅僅是我的理解和總結（不必定是準確的），未證明的地方作了標記。

如下是參考文章

React16源碼解析(二)-建立更新 - 我的文章 - SegmentFault 思否

React Fiber源碼分析 第一篇 - 我的文章 - SegmentFault 思否

React16源碼解讀：揭祕ReactDOM.render - 掘金

React16源碼解讀：開篇帶你搞懂幾個面試考點 - 掘金

剖析 React 源碼：render 流程（一） | 前端進階之道

React@16.8.6原理淺析（源碼淺析） - 掘金

React16源碼之React Fiber架構 - 掘金

怎樣學習React？固然是本身動手實現一個React啦 - 掘金

react fiber 主流程及功能模塊梳理 - 掘金

這多是最通俗的 React Fiber(時間分片) 打開方式 - 掘金

React diff原理探究以及應用實踐 - 我的文章 - SegmentFault 思否

react的diff 從O(n^3)到 O(n) ，請問 O(n^3) 和O(n) 是怎麼算出來？ - 知乎

談談React中Diff算法的策略及實現 - SegmentFault 思否

react diff算法 - 我的文章 - SegmentFault 思否

讓虛擬DOM和DOM-diff再也不成爲你的絆腳石 - 掘金