# Fiber **進程**是操作系統分配資源的最小單元，**線程**是操作系統調度的最小單元，在計算機科學中還有一個概念叫做Fiber，英文含義就是“纖維”，意指比Thread更細的線，也就是比線程(Thread)控制得更精密的并發處理機制。 上面說的Fiber和React Fiber不是相同的概念，但是，React團隊把這個功能命名為Fiber，含義也是更加緊密的處理機制，比Thread更細。 React 官方核心算法名稱是[Reconciliation](https://reactjs.org/docs/reconciliation.html)， 中文翻譯是“協調”！[React diff 算法的實現](https://segmentfault.com/a/1190000016539430?utm_source=tag-newest)就與之相關。 先簡單回顧下React Diff: React首創了“虛擬DOM”概念， “虛擬DOM”能火并流行起來主要原因在于該概念對前端性能優化的突破性創新； 稍微了解瀏覽器加載頁面原理的前端同學都知道網頁性能問題大都出現在DOM節點頻繁操作上； 而React通過“虛擬DOM” + React Diff算法保證了前端性能； ### React Diff算法 將Virtual DOM樹轉換成actual DOM樹的最少操作的過程 稱為 協調（Reconciliaton）。 [React Diff三大策略](https://www.jianshu.com/p/3ba0822018cf)： 1.tree diff; 2.component diff; 3.element diff; PS: 之前H5開發遇到的State 中變量更新但視圖未更新的Bug就是element diff檢測導致。解決方案：1.兩種業務場景下的DOM節點盡量避免雷同； 2.兩種業務場景下的DOM節點樣式避免雷同； 在V16版本之前**協調機制**是**Stack reconciler**， V16版本發布Fiber 架構后是**Fiber reconciler**。 我們都知道瀏覽器渲染引擎是單線程的，在 React15.x 及之前版本，從 setState 開始到渲染完成整個過程是不受控制且連續不中斷完成的，由于該過程將會占用整個線程，則其他任務都會被阻塞，如樣式計算、界面布局以及許多情況下的繪制等。如果需要渲染的是一個很大、層級很深的組件，這可能就會使用戶感覺明顯卡頓，比如更新一個組件需要1毫秒，如果有200個組件要更新，那就需要200毫秒，在這200毫秒的更新過程中，瀏覽器唯一的主線程在專心運行更新操作，無暇去做其他任何事情。想象一下，在這200毫秒內，用戶往一個input元素中輸入點什么，敲擊鍵盤也不會立即獲得響應，雖然渲染輸入按鍵結果是瀏覽器主線程的工作，但是瀏覽器主線程被React占用，抽不出空，最后的結果就是用戶敲了按鍵看不到反應，等React更新過程結束之后，咔咔咔那些按鍵一下子出現在input元素里了，這個版本的調和器可以稱為**棧調和器（Stack Reconciler）**。Stack Reconcilier 的主要缺陷就是**不能暫停渲染任務，也不能切分任務，更無法有效平衡組件更新渲染與動畫相關任務間的執行順序（即不能劃分任務優先級），這樣就很有可能導致重要任務卡頓，動畫掉幀等問題。** 為了解決這個問題，React 團隊經過兩年多的努力，提出了一個更先進的調和器，它允許渲染過程分段完成，而不必一次性完成，在渲染期間可返回到主線程控制執行其他任務。這是通過計算部分組件樹的變更，并暫停渲染更新，詢問主線程是否有更高需求的繪制或者更新任務需要執行，這些高需求的任務完成后再重新渲染。這一切的實現是在代碼層引入了一個新的數據結構：**Fiber對象**，每一個組件實例對應有一個fiber實例，此fiber實例負責管理組件實例的更新，渲染任務及與其他fiber實例的通信，這個先進的調和器**叫做**纖維調和器（Fiber Reconciler）**，它提供的新功能主要有： **一：**把可中斷的任務拆分成小任務； **二：**可重用各分階段任務，對正在做的工作調整優先次序； **三：**可以在父子組件任務間前進后退切換任務，以支持React執行過程中的布局刷新； **四：**支持 render 方法返回多個元素； **五：**對異常邊界處理提供了更好的支持；