React源碼01 - 開篇

1. React16 架構(gòu)

React 是一個 UI 框架：UI = Fn(X)洋访。
React16架構(gòu)可以分為三層：

Scheduler（調(diào)度器）—— 調(diào)度任務(wù)的優(yōu)先級凤粗，高優(yōu)任務(wù)優(yōu)先進入 Reconciler
Reconciler（協(xié)調(diào)器）—— 負責找出變化的組件
Renderer（渲染器）—— 負責將變化的組件渲染到頁面上

主流的瀏覽器刷新頻率為60Hz贸宏，即每（1000ms / 60Hz）16.6ms瀏覽器刷新一次震桶。我們知道，JS可以操作DOM墩朦，GUI渲染線程 與 JS線程是互斥的蒋困。所以JS腳本執(zhí)行和瀏覽器布局、繪制不能同時執(zhí)行矛双。
在每16.6ms時間內(nèi)渊抽，需要完成如下工作：

JS腳本執(zhí)行 -----  樣式布局 ----- 樣式繪制

既然我們以瀏覽器是否有剩余時間作為任務(wù)中斷的標準，那么我們需要一種機制议忽，當瀏覽器有剩余時間時通知我們懒闷。
其實部分瀏覽器已經(jīng)實現(xiàn)了這個API，這就是 requestIdleCallback栈幸。但是由于以下因素愤估，React 放棄使用：

瀏覽器兼容性
觸發(fā)頻率不穩(wěn)定，受很多因素影響速址。比如當我們的瀏覽器切換tab后玩焰，之前tab注冊的 requestIdleCallback 觸發(fā)的頻率會變得很低。

React 實現(xiàn)了功能更完備的 requestIdleCallback polyfill芍锚，這就是 Scheduler昔园，除了在空閑時觸發(fā)回調(diào)的功能外，Scheduler 還提供了多種調(diào)度優(yōu)先級供任務(wù)設(shè)置闹炉。

當 Scheduler 將任務(wù)交給 Reconciler 后蒿赢，Reconciler 會為變化的虛擬 DOM 打上代表增/刪/更新的標記，類似這樣：

export const Placement = /*             */ 0b0000000000010;
export const Update = /*                */ 0b0000000000100;
export const PlacementAndUpdate = /*    */ 0b0000000000110;
export const Deletion = /*              */ 0b0000000001000;

整個 Scheduler 與 Reconciler 的工作都在內(nèi)存中進行渣触。只有當所有組件都完成 Reconciler 的工作后，才會統(tǒng)一交給 Renderer壹若。

Renderer 根據(jù) Reconciler 為虛擬 DOM 打的標記嗅钻，同步執(zhí)行對應(yīng)的 DOM 操作。

image.png

其中紅框中的步驟隨時可能由于以下原因被中斷：

有其他更高優(yōu)任務(wù)需要先更新
當前幀沒有剩余時間

由于紅框中的工作都在內(nèi)存中進行店展，不會更新頁面上的DOM养篓，即使反復中斷用戶也不會看見更新不完全的DOM。
因此可以說 Scheduler 和 Reconciler 是和平臺無關(guān)的赂蕴，而和平臺相關(guān)的是 Renderer柳弄。

2. 源碼位置

packages 包中：
主要是 react、react-dom、react-reconciler碧注、scheduler嚣伐，react-dom 和 react native 都重度依賴 react-reconciler。

react 包不大萍丐，主要是一些入口定義轩端，而大部分的代碼都在跟平臺相關(guān)的 react-dom 和 react-reconciler 中。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者