react16以後做了很大的改變，對diff演算法進行了重寫，從總體看，主要是把一次計算，改變為多次計算，在瀏覽器有高階任務時，暫停計算。
原理：從stack reconciler到fiber reconciler，原始碼層面其實就是幹了一件遞迴改迴圈的事情
fiber設計目的：解決由於大量計算導致瀏覽器掉幀現象。
由於js是單執行緒的，解決主線程被長時間計算占用的問題，就是將計算分為多個步驟，分批完成，每完成一次計算就將主線程交還給瀏覽器，讓頁面有時間渲染。
react更新前後：
舊版：舊版 react 通過遞迴的方式進行渲染，使用的是 js 引擎自身的函式呼叫棧，它會一直執行到棧空為止
新版：fiber實現了自己的元件呼叫棧，它以鍊錶的形式遍歷元件樹，可以靈活的暫停、繼續和丟棄執行的任務。實現方式是使用了瀏覽器的requestidlecallback這一 api。
react從框架層面有三個層級
virtual dom 層
virtual dom 層，描述頁面長什麼樣。
reconciler 層
負責呼叫元件生命週期方法，進行 diff 運算等。
renderer 層
根據不同的平台，渲染出相應的頁面，比較常見的是 reactdom 和 reactnative。
為了加以區分，以前的 reconciler 被命名為stack reconciler。stack reconciler 運作的過程是不能被打斷的，必須一條道走到黑。
為了達到這種效果，就需要有乙個排程器 (scheduler) 來進行任務分配。任務的優先順序有六種：
優先順序高的任務（如鍵盤輸入）可以打斷優先順序低的任務（如diff）的執行，從而更快的生效。
fiber reconciler在第一階段diff時，會生成一棵樹，這棵樹是在virtual dom的基礎上增加額外資訊生成的，本質上是乙個鍊錶。
fiber tree首次渲染：一次生成
後續diff:根據virtual dom和已有tree生成新的tree，這棵樹每生成乙個節點，都會把控制權交給瀏覽器，去檢查有沒有優先順序更高的任務需要執行。如果沒有，則繼續構建樹的過程，如果過程中有優先順序更高的任務需要進行，則 fiber reconciler 會丟棄正在生成的樹。
總結：從stack reconciler到fiber reconciler，原始碼層面其實就是幹了一件遞迴改迴圈的事情
參考：
react的fiber分片機制
fiber 是乙個工作單元，它的引入是react實現任務分片和時間分片的基礎。分片是為了在reconciliation階段 純js計算，無dom操作 一點一點地執行任務，給瀏覽器喘息的機會，從而在體驗上給使用者更流暢的使用感受。任務分片 乙個工作單元是什麼？可以從 中直觀地理解。import rea...
react 元件架構
容器型元件 container component 展示型元件 presentational component 把網路請求 列表展示的元件拆分成以上的容器型元件 展示型元件 在容器元件中訪問網路，有結果之後執行setstate，在render中使用展示型元件，網路請求來的列表通過propos傳遞給...
2018最新React實戰高階45講
課程目錄 第一章 react 基礎 01 react出現的歷史背景及特性介紹 02 以元件方式考慮ui的構建 03 jsx 的本質 不是模板引擎，而是語法糖 04 react元件的生命週期及其使用場景 05 理解 virtual dom 及 key 屬性的作用 06 元件設計模式 高階元件和函式作為...