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

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

第一步： 

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

又或者是通過createRoot 進(jìn)而render 。 如下圖：

第二步：

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

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

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

流程圖如下：

3. 開始實(shí)施。

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

控制臺(tái)輸出如下圖

總結(jié)：

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

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

最新評(píng)論