一：react 理念 - 快速響應(yīng)，解決快速響應(yīng) - 同步更新變?yōu)榭芍袛喈惒桓隆?/p>

二：react 架構(gòu)? 調(diào)度器（任務(wù)優(yōu)先級）/ 協(xié)調(diào)器 找變化組件?/渲染器 將變化組件渲染在頁面

當(dāng)項(xiàng)目變得龐大、組件數(shù)量繁多時(shí)，就容易遇到CPU的瓶頸。?JS腳本執(zhí)行 ----- 樣式布局 ----- 樣式繪制

IO的瓶頸- 接口請求慢

時(shí)間切片 將同步的更新變?yōu)?b>可中斷的異步更新。

二：React16架構(gòu)可以分為三層：

Scheduler（調(diào)度器）—— 調(diào)度任務(wù)的優(yōu)先級，高優(yōu)任務(wù)優(yōu)先進(jìn)入Reconciler

Reconciler（協(xié)調(diào)器）—— 負(fù)責(zé)找出變化的組件

Renderer（渲染器）—— 負(fù)責(zé)將變化的組件渲染到頁面上

React16采用新的Reconciler。 Reconciler內(nèi)部采用了Fiber的架構(gòu)。

React Fiber可以理解為：

React內(nèi)部實(shí)現(xiàn)的一套狀態(tài)更新機(jī)制。支持任務(wù)不同優(yōu)先級，可中斷與恢復(fù)，并且恢復(fù)后可以復(fù)用之前的中間狀態(tài)。

其中每個(gè)任務(wù)更新單元為React Element對應(yīng)的Fiber節(jié)點(diǎn)。

三：Fiber包含三層含義：

作為架構(gòu)來說，之前React15的Reconciler采用遞歸的方式執(zhí)行，數(shù)據(jù)保存在遞歸調(diào)用棧中，所以被稱為stack Reconciler。React16的Reconciler基于Fiber節(jié)點(diǎn)實(shí)現(xiàn)，被稱為Fiber Reconciler。

作為靜態(tài)的數(shù)據(jù)結(jié)構(gòu)來說，每個(gè)Fiber節(jié)點(diǎn)對應(yīng)一個(gè)React element，保存了該組件的類型（函數(shù)組件/類組件/原生組件...）、對應(yīng)的DOM節(jié)點(diǎn)等信息。

作為動態(tài)的工作單元來說，每個(gè)Fiber節(jié)點(diǎn)保存了本次更新中該組件改變的狀態(tài)、要執(zhí)行的工作（需要被刪除/被插入頁面中/被更新...）。

四：React使用“雙緩存”來完成Fiber樹的構(gòu)建與替換——對應(yīng)著DOM樹的創(chuàng)建與更新。 雙緩存：在內(nèi)存中構(gòu)建并直接替換