在console中打印React Fiber樹(shù)的操作步驟
眾所周知React的性能好得益于 他杰出特性 Fiber架構(gòu)設(shè)計(jì), React Fiber 是 React 16 中引入的新的協(xié)調(diào)引擎或重寫(xiě)的核心算法， 真針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)和等 這里就不過(guò)多贅述。
這次主要的研究對(duì)象是： 如何從使用者/學(xué)習(xí) 者角度 在js 代碼上 拿到fiber 樹(shù)結(jié)構(gòu)的信息。 比如頁(yè)面構(gòu)建完成后， console 對(duì)應(yīng)的fiber tree 的json。
第一步：
react 切入項(xiàng)目入口是在 ReactDom.render() 。如下圖：
又或者是通過(guò)createRoot 進(jìn)而render 。 如下圖：
第二步：
查看react render 的源碼 一探究竟。
走到這里 大致就比較清晰了， 在root 節(jié)點(diǎn)上增加以字符串“__reactContainer” + 隨機(jī)數(shù) 的屬性， 屬性值就是fiberRoot 節(jié)點(diǎn)。
那是不是我們只要通過(guò)dom 節(jié)點(diǎn) 獲取root 節(jié)點(diǎn)的“__reactContainer” + 隨機(jī)數(shù) 的屬性 就找到了react 的樹(shù)節(jié)點(diǎn)， 夜就拿到了整棵樹(shù)。
流程圖如下：
3. 開(kāi)始實(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ī)鍵來(lái)獲取Fiber節(jié)點(diǎn)，而是應(yīng)該使用React提供的官方API和工具來(lái)管理組件和調(diào)試應(yīng)用程序。
以上就是在console中打印React Fiber樹(shù)的操作步驟的詳細(xì)內(nèi)容，更多關(guān)于console中打印React Fiber的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中useRef的具體使用，它可以用來(lái)獲取組件實(shí)例對(duì)象或者是DOM對(duì)象，除此之外還有哪些用法，就一起來(lái)了解一下2021-04-04
筆者最近用react useEffect閉包，其中踩到了一些坑在此與大家分享一下。需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
這篇文章主要介紹了React中的生命周期用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
React實(shí)現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個(gè)數(shù)據(jù)時(shí)，是通過(guò)自己逐級(jí)查找對(duì)比改變的數(shù)據(jù)然后渲染，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案
這篇文章主要介紹了基于react項(xiàng)目打包c(diǎn)ss引用路徑錯(cuò)誤解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
對(duì)于剛學(xué)前端的大家來(lái)說(shuō),對(duì)于React中的事件監(jiān)聽(tīng)寫(xiě)法有所疑問(wèn)很正常，特別是React中箭頭函數(shù)使用這塊，下面這篇文章主要給大家深入的講解了關(guān)于React中何時(shí)使用箭頭函數(shù)的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
React項(xiàng)目仿小紅書(shū)首頁(yè)保姆級(jí)實(shí)戰(zhàn)教程
React 是一個(gè)用于構(gòu)建用戶界面的 Javascript庫(kù)，接下來(lái)將通過(guò)實(shí)戰(zhàn)小紅書(shū)首頁(yè)的詳細(xì)介紹其設(shè)計(jì)思路和方法，將讀者帶入到react的開(kāi)源世界,需要的朋友可以參考下2022-07-07
React?Native性能優(yōu)化指南及問(wèn)題小結(jié)
本文將介紹在React?Native開(kāi)發(fā)中常見(jiàn)的性能優(yōu)化問(wèn)題和解決方案,包括ScrollView內(nèi)無(wú)法滑動(dòng)、熱更新導(dǎo)致的文件引用問(wèn)題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家詳細(xì)介紹了如何在React中實(shí)現(xiàn)插槽，文中的示例代碼講解詳細(xì)，對(duì)我們的學(xué)習(xí)或工作具有一定的借鑒價(jià)值，需要的可以了解一下2023-03-03
這篇文章主要為大家介紹了ahooks?useInfiniteScroll源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01