北京時間8月11日凌晨，React團隊發佈了React17第一個RC版本。該版本的最大特性是「無新特性」。前端
那麼，從v16到v17這一年多時間React團隊究竟在作什麼？web
遙想從v15到v16，React團隊花了兩年時間將源碼架構中的Stack Reconciler重構爲Fiber Reconciler，事情必定沒有這麼簡單。算法
事實上，此次版本更迭確實有「新特性」 —— 替換了內部使用的啓發式更新算法。瀏覽器
只不過這個特性對開發者是無感知的。微信
本文接下來將講述以下內容：數據結構
-
起源：爲何會出現
啓發式更新算法？架構 -
現狀：
React16的啓發式更新算法及他的不足併發 -
將來：
React17的啓發式更新算法app
爲何會出現啓發式更新算法
框架的運行性能是框架設計者在設計框架時須要重點關注的點。框架
Vue使用模版語法，能夠在編譯時對肯定的模版做出優化。
而React純JS寫法太過靈活，使他在編譯時優化方面先天不足。
因此，React的優化主要在運行時。
React15的痛點
在運行時優化方面，React一直在努力。
好比，React15實現了batchedUpdates（批量更新）。
即同一事件回調函數上下文中的屢次setState只會觸發一次更新。
可是，若是單次更新就很耗時，頁面仍是會卡頓（這在一個維護時間很長的大應用中是很常見的）。
這是由於React15的更新流程是同步執行的，一旦開始更新直到頁面渲染前都不能中斷。
爲了解決同步更新長時間佔用線程致使頁面卡頓的問題，也爲了探索運行時優化的更多可能，React開始重構並一直持續至今。
重構的目標是實現Concurrent Mode（併發模式）。
Concurrent Mode
Concurrent Mode的目的是實現一套可中斷/恢復的更新機制。
其由兩部分組成：
-
一套
協程架構 -
基於
協程架構的啓發式更新算法
其中，協程架構就是React16中實現的Fiber Reconciler。
咱們能夠將Fiber Reconciler理解爲React本身實現的Generator。
Fiber Reconciler從理念到源碼的詳細介紹公衆號後臺回覆51
協程架構使更新能夠在須要的時機被中斷，這樣瀏覽器就有時間完成樣式佈局與樣式繪製，減小卡頓（掉幀）的出現。
當瀏覽器進入下一次事件循環，協程架構能夠恢復中斷或者拋棄以前的更新，從新開始新的更新流程。
啓發式更新算法就是控制協程架構工做方式的算法。
React16的啓發式更新算法
啓發式更新算法的啓發式指什麼呢？
啓發式指不經過顯式的指派，而是經過優先級調度更新。
其中優先級來源於人機交互的研究成果。
好比：
人機交互的研究成果代表：
-
當用戶在輸入框輸入內容時，但願輸入的內容能實時響應在輸入框
-
當異步請求數據後，即便等待一下子再顯示內容，用戶也是能夠接受的
基於此，在React16中
輸入框輸入內容觸發的`更新`優先級 > 請求數據返回後觸發`更新`優先級
算法實現
在React1六、17中，在組件內執行this.setState後會在該組件對應的fiber節點內產生一種鏈表數據結構update。
其中，update.expirationTimes爲相似時間戳的字段，表示優先級。
expirationTimes從字面意義理解爲過時時間。
該值離當前時間越接近，該update 優先級越高。
當update.expirationTimes超過當前時間，則表明該update過時，優先級變爲最高（即同步）。
一棵fiber樹的多個fiber節點可能存在多個update。
每次Fiber Reconciler調度更新時，會在全部fiber節點的全部update.expirationTimes中選擇一個expirationTimes（通常選擇最大的），做爲本次更新的優先級。
並從根fiber節點開始向下構建新的fiber樹。
構建過程當中若是某個fiber節點包含update，且
update.expirationTimes >= expirationTimes
則該update對應的state變化會體如今本次更新中。
能夠理解爲：每次更新，都會選定一個優先級（expirationTimes），最終頁面會渲染爲該優先級對應update的快照。
舉個例子，咱們有如圖所示fiber樹，當前尚未更新產生，因此沒有構建中的fiber樹。
當在C建立一個低優先級update，調度更新，本次更新選擇的優先級爲低優先級。
開始構建新的fiber樹（圖右側）。
此時，咱們在D建立一個高優先級update。
這會中斷進行中的低優先級更新，從新開始以高優先級生成一棵fiber樹。
因爲以前的更新被中斷，尚未任何渲染操做，此時視圖中（左圖）尚未任何變化。
本次更新選定的優先級爲高優先級，C的update（低優先級）會被跳過。
更新完成後新的fiber樹會被渲染到視圖中。
因爲C被跳過，因此不會在視圖（左圖）中體現。
接下來咱們在E觸發一次高優先級update。
C雖然包含低優先級update，但隨着時間的推移，他的expirationTimes已通過期，變爲高優先級。
因此本次更新會有C E兩個fiber節點產生變化。
最終完成更新後，視圖以下：
關於更新
優先級的詳細解釋公衆號後臺回覆52
算法缺陷
若是隻考慮中斷/繼續這樣的CPU操做，以expirationTimes大小做爲衡量優先級依據的模型能夠很好工做。
可是expirationTimes模型不能知足IO操做（Suspense）。
在該模型下，高優先級IO任務（Suspense）會中斷低優先級CPU任務。
還記得麼，每次更新，都是以某一優先級做爲整棵樹的優先級更新標準，而不只僅是某一組件，即便更新的源頭（update）確實是某個組件產生的。
expirationTimes模型只能區分是否>=expirationTimes這種狀況。
爲了拓展Concurrent Mode能力邊界，須要一種更細粒度的啓發式優先級更新算法。
React17啓發式更新算法
最理想的模型是：能夠指定任意幾個優先級，更新會以這些優先級對應update生成頁面快照。
可是現有架構下，該方案實現上有瓶頸。
妥協之下，React17的解決方案是：指定一個連續的優先級區間，每次更新都會以區間內包含的優先級生成對應頁面快照。
這種優先級區間模型被稱爲lanes（車道模型）。
具體作法是：使用一個31位的二進制表明31種可能性。
-
其中每一個
bit被稱爲一個lane（車道），表明優先級 -
某幾個
lane組成的二進制數被稱爲一個lanes，表明一批優先級
能夠從源碼中看到，從藍線一路劃下去，每一個bit都對應一個lane或lanes。
當update產生，會根據React16一樣的啓發式方式，得到以下優先級的一種：
export const SyncLanePriority: LanePriority = 17;
export const SyncBatchedLanePriority: LanePriority = 16;
export const InputDiscreteLanePriority: LanePriority = 14;
export const InputContinuousLanePriority: LanePriority = 12;
export const DefaultLanePriority: LanePriority = 10;
export const TransitionShortLanePriority: LanePriority = 8;
export const TransitionLongLanePriority: LanePriority = 6;
其中值越高，優先級越大。
好比：
-
點擊事件回調中觸發this.setState產生的update會得到InputDiscreteLanePriority。 -
同步的
update會得到SyncLanePriority。
接下來，update會以priority爲線索尋找沒被佔用的lane。
若是當前fiber樹已經存在更新且更新的lanes包含了該lane，則update須要尋找其餘lane。
好比，InputDiscreteLanePriority對應的lanes爲InputDiscreteLanes。
// 第四、5位爲1
const InputDiscreteLanes: Lanes = 0b0000000000000000000000000011000;
該lanes包含第四、5位2個bit位。
若是其中
// 第五位爲1
0b0000000000000000000000000010000
第五位的lane已經被佔用，則該update能夠嘗試佔有後一個，即
// 第四位爲1
0b0000000000000000000000000001000
若是InputDiscreteLanes的兩個lane都被佔用，則該update的優先級會降低到InputContinuousLanePriority並繼續尋找空餘的lane。
這個過程就像：購物中心每一層（不一樣優先級）都有一個露天停車場（lanes），停車場有多個車位（lane）。
咱們先開車到頂樓找車位（lane），若是沒有車位就下一樓繼續找。
直到找到空餘車位。
因爲lanes能夠包含多個lane，能夠很方便的區分IO操做（Suspense）與CPU操做。
當構建fiber樹進入構建Suspense子樹時，會將Suspense的lane插入本次更新選定的lanes中。
當構建離開Suspense子樹時，會將Suspense lane從本次更新的lanes中移除。
總結
React16的expirationTimes模型只能區分是否>=expirationTimes決定節點是否更新。
React17的lanes模型能夠選定一個更新區間，而且動態的向區間中增減優先級，能夠處理更細粒度的更新。
【噹噹開學季圖書大促】每滿100-50的基礎上，滿200元輸入優惠券【F5NRYA】再疊加立減40元！至關於160能夠買400的書。心動不如行動！
最後
若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：
點個「在看」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-）
歡迎加我微信「qianyu443033099」拉你進技術羣，長期交流學習...
關注公衆號「前端下午茶」，持續爲你推送精選好文，也能夠加我爲好友，隨時聊騷。
本文分享自微信公衆號 - 前端下午茶（qianduanxiawucha）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。