react底層的四大核心內容架構是什么

今天小編給大家分享一下react底層的四大核心內容架構是什么的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

react

• 提供定義 react 組件(ReactElement)的必要函數, 一般來說需要和渲染器(react-dom,react-native)一同使用. 在編寫react應用的代碼時, 大部分都是調用此包的 api.如React.Component

• 開發時使用的絕大部分api

• class 組件中使用setState()

• function 組件里面使用 hook,并發起dispatchAction去改變 hook 對象

• 改變 context(其實也需要setState或dispatchAction的輔助才能改變)

react-dom

• 是 react 與 web 平臺連接的橋梁(可以在瀏覽器和 nodejs 環境中使用), 將react-reconciler中的運行結果輸出到 web 界面上. 在編寫react應用的代碼時,大多數場景下, 能用到此包的就是一個入口函數ReactDOM.render(,document.getElementByID(‘root’)), 其余使用的 api, 基本是react包提供的.

• 引導react應用的啟動(通過ReactDOM.render).

• 能夠將react-reconciler包構造出來的fiber樹表現出來, 生成 dom 節點(瀏覽器中), 生成字符串(ssr)

react-reconciler

• 綜合協調react-dom,react,scheduler各包之間的調用與配合，管理 react 應用狀態的輸入和結果的輸出. 將輸入信號最終轉換成輸出信號傳遞給渲染器

• 接收react-dom包(初次render)和react包(后續更新setState)發起的更新請求.

• 將fiber樹的構造過程包裝在一個回調函數中, 并將此回調函數傳入到scheduler包等待調度.

具體流程：

• 接受輸入(schedulerUpdateOnFiber), 將fiber樹生成邏輯封裝到一個回調函數中(涉及fiber樹形結構, fiber.updateQueue隊列, 調和算法等)

• 把此回調函數(performSyncWorkOnRoot或performConcurrentWorkOnRoot)送入scheduler進行調度

• scheduler會控制回調函數執行的時機, 回調函數執行完成后得到全新的 fiber 樹

• 再調用渲染器(如react-dom, react-native等)將 fiber 樹形結構最終反映到界面上

scheduler

• 調度機制的核心實現, 控制由react-reconciler送入的回調函數的執行時機, 在concurrent模式下可以實現任務分片.

• 在內部維護一個任務隊列, 優先級高的排在最前面

• 循環消費任務隊列, 直到隊列清空.

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

• 從updateContainer開始，根據scheduler進行任務調度，展開后面流程

以上就是“react底層的四大核心內容架構是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。