本源碼學(xué)習(xí)筆記始發(fā)：React 源碼學(xué)習(xí)-yuque

1. React16 架構(gòu)

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

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

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

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

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

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

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

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

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

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

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

image.png

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

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

由于紅框中的工作都在內(nèi)存中進(jìn)行，不會(huì)更新頁面上的DOM，即使反復(fù)中斷用戶也不會(huì)看見更新不完全的DOM。
因此可以說 Scheduler 和 Reconciler 是和平臺(tái)無關(guān)的，而和平臺(tái)相關(guān)的是 Renderer。

2. 源碼位置

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

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