眾所周知React的性能好得益于 他杰出特性 Fiber架構(gòu)設(shè)計, React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫的核心算法， 真針Fiber的一個重要的核心概念Fiber Node。 Fiber Node 是對組件的實力在js代碼層面的結(jié)構(gòu)數(shù)據(jù)表現(xiàn)。 每個 Fiber Node 對應(yīng)一個 React Element，并包含了關(guān)于組件的信息，比如其類型、屬性等。Fiber Node 節(jié)點的關(guān)聯(lián)組織 構(gòu)成了Fiber Tree。 至于如何構(gòu)建， 怎么diff 調(diào)和等 這里就不過多贅述。

這次主要的研究對象是： 如何從使用者/學習 者角度 在js 代碼上 拿到fiber 樹結(jié)構(gòu)的信息。 比如頁面構(gòu)建完成后， console 對應(yīng)的fiber tree 的json。

第一步： 

react 切入項目入口是在 ReactDom.render() 。如下圖：

又或者是通過createRoot 進而render 。 如下圖：

第二步：

查看react render 的源碼 一探究竟。

走到這里 大致就比較清晰了， 在root 節(jié)點上增加以字符串“__reactContainer” + 隨機數(shù) 的屬性， 屬性值就是fiberRoot 節(jié)點。

那是不是我們只要通過dom 節(jié)點 獲取root 節(jié)點的“__reactContainer” + 隨機數(shù) 的屬性 就找到了react 的樹節(jié)點， 夜就拿到了整棵樹。

流程圖如下：

3. 開始實施。

const container = document.getElementById("app");
Object.getOwnPropertyNames(container).forEach(key =>{
    if(key.startsWith("__reactContainer")){
        console.log(key, container[key])
    }
} )

控制臺輸出如下圖

總結(jié)：

react 的fiber 是掛在了dom  root 節(jié)點上 [“__reactContainer” + 隨機值] 的， 但是不建議依賴__reactContainer$和隨機鍵來獲取Fiber節(jié)點，而是應(yīng)該使用React提供的官方API和工具來管理組件和調(diào)試應(yīng)用程序。

以上就是在console中打印React Fiber樹的操作步驟的詳細內(nèi)容，更多關(guān)于console中打印React Fiber的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論