在console中打印React Fiber樹的操作步驟
眾所周知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)和等 這里就不過多贅述。
這次主要的研究對象是： 如何從使用者/學(xué)習(xí) 者角度 在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樹的操作步驟的詳細(xì)內(nèi)容，更多關(guān)于console中打印React Fiber的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中useRef的具體使用，它可以用來獲取組件實例對象或者是DOM對象，除此之外還有哪些用法，就一起來了解一下2021-04-04
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了React中的生命周期用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
React實現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了基于react項目打包css引用路徑錯誤解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
對于剛學(xué)前端的大家來說,對于React中的事件監(jiān)聽寫法有所疑問很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關(guān)于React中何時使用箭頭函數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
React 是一個用于構(gòu)建用戶界面的 Javascript庫，接下來將通過實戰(zhàn)小紅書首頁的詳細(xì)介紹其設(shè)計思路和方法，將讀者帶入到react的開源世界,需要的朋友可以參考下2022-07-07
React?Native性能優(yōu)化指南及問題小結(jié)
本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動、熱更新導(dǎo)致的文件引用問題、高度獲取、強制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了如何在React中實現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對我們的學(xué)習(xí)或工作具有一定的借鑒價值，需要的可以了解一下2023-03-03
這篇文章主要為大家介紹了ahooks?useInfiniteScroll源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01