react爲什麼採用fiber架構

這裏要對比一下stack和fiber架構的不一樣以及react在fiber架構作了那些更改

這裏說到了react16使用了fiber,那咱們看下16以前輸入stack架構的實現的問題，提及React算法架構避不開「Reconciliaton」。

Reconciliation

React 官方核心算法名稱是 Reconciliation ， 中文翻譯是「協調」！[React diff 算法的實現就與之相關。
稍微瞭解瀏覽器加載頁面原理的前端同窗都知道網頁性能問題大都出如今DOM節點頻繁操做上；
而React經過「虛擬DOM」 + React Diff算法保證了前端性能

傳統Diff算法

經過循環遞歸對節點進行依次對比，算法複雜度達到 O(n^3) ，n是樹的節點數，這個有多可怕呢？——若是要展現1000個節點，得執行上億次比較。。即使是CPU快能執行30億條命令，也很難在一秒內計算出差別。

React Diff算法

將Virtual DOM樹轉換成actual DOM樹的最少操做的過程 稱爲 協調（Reconciliaton）。
React Diff三大策略 ：

• tree diff
• component diff
• element diff

在V16版本以前 協調機制 是 Stack reconciler， V16版本發佈Fiber 架構後是 Fiber reconciler。

咱們先說Stack reconciler存在的問題:
在setState後，react會當即開始reconciliation過程，從父節點（Virtual DOM）開始遞歸遍歷，以找出不一樣。將全部的Virtual DOM遍歷完成後，reconciler才能給出當前須要修改真實DOM的信息，並傳遞給renderer，進行渲染，而後屏幕上纔會顯示這次更新內容。

對於特別龐大的DOM樹來講，reconciliation過程會很長(x00ms)，在這期間，主線程是被js佔用的，所以任何交互、佈局、渲染都會中止，給用戶的感受就是頁面被卡住了。

在這裏咱們想解決這個問題的話,來引入一個概念,就是任務可中斷,以及任務優先級,也就是說咱們的reconciliation的過程當中會生成一些任務和子任務,用戶的操做的任務優先級是要高於reconciliation產生的任務的,也就是說用戶操做的任務是能夠打斷reconciliation中產生得任務的,它會優先執行.

Fiber reconciler

原來的React更新任務是採用遞歸形式，那麼如今若是任務想中斷， 在遞歸中是很難處理， 因此React改爲了大循環模式，修改了生命週期也是由於任務可中斷。

Fiber reconciler 使用了scheduling(調度)這一過程， 每次只作一個很小的任務，作完後可以「喘口氣兒」，回到主線程看下有沒有什麼更高優先級的任務須要處理，若是有則先處理更高優先級的任務，沒有則繼續執行(cooperative scheduling 合做式調度)。

因此Fiber 架構就是用 異步的方式解決舊版本 同步遞歸致使的性能問題。

本文借鑑於
https://segmentfault.com/a/11...