react

• 提供定義 react 組件(ReactElement)的必要函數(shù), 一般來說需要和渲染器(react-dom,react-native)一同使用. 在編寫react應(yīng)用的代碼時, 大部分都是調(diào)用此包的 api.如React.Component
• 開發(fā)時使用的絕大部分api
  • class 組件中使用setState()
  • function 組件里面使用 hook,并發(fā)起dispatchAction去改變 hook 對象
  • 改變 context(其實也需要setState或dispatchAction的輔助才能改變)

react-dom

• 是 react 與 web 平臺連接的橋梁(可以在瀏覽器和 nodejs 環(huán)境中使用), 將react-reconciler中的運行結(jié)果輸出到 web 界面上. 在編寫react應(yīng)用的代碼時,大多數(shù)場景下, 能用到此包的就是一個入口函數(shù)ReactDOM.render(,document.getElementByID(‘root’)), 其余使用的 api, 基本是react包提供的.
• 引導(dǎo)react應(yīng)用的啟動(通過ReactDOM.render).
• 能夠?qū)eact-reconciler包構(gòu)造出來的fiber樹表現(xiàn)出來, 生成 dom 節(jié)點(瀏覽器中), 生成字符串(ssr)

react-reconciler

• 綜合協(xié)調(diào)react-dom,react,scheduler各包之間的調(diào)用與配合，管理 react 應(yīng)用狀態(tài)的輸入和結(jié)果的輸出. 將輸入信號最終轉(zhuǎn)換成輸出信號傳遞給渲染器
• 接收react-dom包(初次render)和react包(后續(xù)更新setState)發(fā)起的更新請求.
• 將fiber樹的構(gòu)造過程包裝在一個回調(diào)函數(shù)中, 并將此回調(diào)函數(shù)傳入到scheduler包等待調(diào)度.

具體流程：

• 接受輸入(schedulerUpdateOnFiber), 將fiber樹生成邏輯封裝到一個回調(diào)函數(shù)中(涉及fiber樹形結(jié)構(gòu), fiber.updateQueue隊列, 調(diào)和算法等)
• 把此回調(diào)函數(shù)(performSyncWorkOnRoot或performConcurrentWorkOnRoot)送入scheduler進行調(diào)度
• scheduler會控制回調(diào)函數(shù)執(zhí)行的時機, 回調(diào)函數(shù)執(zhí)行完成后得到全新的 fiber 樹
• 再調(diào)用渲染器(如react-dom, react-native等)將 fiber 樹形結(jié)構(gòu)最終反映到界面上

scheduler

• 調(diào)度機制的核心實現(xiàn), 控制由react-reconciler送入的回調(diào)函數(shù)的執(zhí)行時機, 在concurrent模式下可以實現(xiàn)任務(wù)分片.
• 在內(nèi)部維護一個任務(wù)隊列, 優(yōu)先級高的排在最前面
• 循環(huán)消費任務(wù)隊列, 直到隊列清空.

整體工作邏輯（不一定正確）

• 從updateContainer開始，根據(jù)scheduler進行任務(wù)調(diào)度，展開后面流程

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容! 

最新評論