fiber 是乙個工作單元，它的引入是react實現任務分片和時間分片的基礎。分片是為了在reconciliation階段（純js計算，無dom操作）一點一點地執行任務，給瀏覽器喘息的機會，從而在體驗上給使用者更流暢的使用感受。
任務分片
乙個工作單元是什麼？可以從**中直觀地理解。
import react from 'react'
import reactdom from 'react-dom'
return (
link)}
其中null對應著fiber的根節點，雖然在視覺上是什麼都看不見的，但它的確在記憶體裡。剩下的fiber節點都比較好理解。
每當更新發生時，react會從fiber的根節點開始，乙個乙個地迴圈遍歷所有的fiber。
react 通過迴圈，乙個乙個地對fiber執行performunitofwork操作，以此實現了任務分片。
時間分片
時間分片的邏輯藏在迴圈裡。
//react-reconciler -> reactfiberworkloop.js
function workloopconcurrent()
}
當shouldyield返回true的時候，迴圈語句中斷，乙個時間分片就結束了，瀏覽器將重獲控制權。
以下任意條件成立時，shouldyield會返回true
react 通過中斷任務迴圈，實現了時間分片。
任務恢復
迴圈中斷時，下乙個未被完成的任務已經被儲存到react-reconciler模組的全域性變數workinprogress中。下一次迴圈開始時就從workinprogress開始。
以上都發生在瀏覽器重獲控制權之前。
而監聽這個事件的，正是迴圈的發起者performworkuntildeadline。
// scheduler.development.js
const performworkuntildeadline = () => else
} catch (error)
} else
needspaint = false;
};const channel = new messagechannel();
const port = channel.port2;
channel.port1.onmessage = performworkuntildeadline;
以上特性，目前只在開啟concurrent模式時有效。預設模式下只有任務分片，但是是同步執行的，所以不存在時間分片。
react最新fiber架構原理和流程
react16以後做了很大的改變，對diff演算法進行了重寫，從總體看，主要是把一次計算，改變為多次計算，在瀏覽器有高階任務時，暫停計算。原理 從stack reconciler到fiber reconciler，原始碼層面其實就是幹了一件遞迴改迴圈的事情 fiber設計目的 解決由於大量計算導致瀏...
React事件機制
如果dom上繫結了過多的事件處理函式，整個頁面響應以及記憶體占用可能都會受到影響。react為了避免這類dom事件濫用，同時遮蔽底層不同瀏覽器之間的事件系統差異，實現了乙個中間層 syntheticevent。步驟react事件機制執行分為如下兩個步驟。特點合成事件和原生事件的區別 原生事件 rea...
簡單的 React 授權機制
大多數的應用都需要身份驗證機制和授權機制，當驗證機制確認某些實體是合法使用者時，授權機制將根據使用者的角色和許可權去決定使用者是否被允許去執行這些操作 在大多數情況下，我們通常不需要特殊的模組或者庫來處理授權，大多數的工具函式已經足夠了。由你提供的應用內的驗證或者授權解決方法是可以變化的。你可能會決...