如何在console 里 打印 React Fiber 树?

众所周知React的性能好得益于 他杰出特性 Fiber架构设计, React Fiber 是 React 16 中引入的新的协调引擎或重写的核心算法, 真针Fiber的一个重要的核心概念Fiber Node。 Fiber Node 是对组件的实力在js代码层面的结构数据表现。 每个 Fiber Node 对应一个 React Element,并包含了关于组件的信息,比如其类型、属性等。Fiber Node 节点的关联组织 构成了Fiber Tree。 至于如何构建, 怎么diff 调和等 这里就不过多赘述。

这次主要的研究对象是: 如何从使用者/学习 者角度 在js 代码上 拿到fiber 树结构的信息。 比如页面构建完成后, console 对应的fiber tree 的json。

  1. 第一步:

    react 切入项目入口是在 ReactDom.render() 。如下图:

    又或者是通过createRoot 进而render 。 如下图:

  2. 第二步:

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

    走到这里 大致就比较清晰了, 在root 节点上增加以字符串"__reactContainer" + 随机数 的属性, 属性值就是fiberRoot 节点。

    那是不是我们只要通过dom 节点 获取root 节点的"__reactContainer" + 随机数 的属性 就找到了react 的树节点, 夜就拿到了整棵树。

    流程图如下:

    3. 开始实施。

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

    控制台输出如下图

总结:

react 的fiber 是挂在了dom root 节点上 ["__reactContainer" + 随机值] 的, 但是不建议依赖__reactContainer$和随机键来获取Fiber节点,而是应该使用React提供的官方API和工具来管理组件和调试应用程序。

相关推荐
Mintopia8 小时前
⚡当 Next.js 遇上实时通信:Socket.io 与 Pusher 双雄传
前端·后端·全栈
tangdou3690986558 小时前
可怕!我的Nodejs系统因为日志打印了Error 对象就崩溃了😱 Node.js System Crashed Because of Logging
前端·javascript·后端
Takklin8 小时前
Vue 与 React 应用初始化机制对比 - 前端框架思考笔记
前端·react.js
Mintopia8 小时前
🎨 数据增强技术在 AIGC 训练中的应用:提升 Web 生成的多样性
前端·javascript·aigc
华仔啊8 小时前
如何用 Vue3 打造高级音乐播放器?进度条+可视化效果,代码简洁可复用!
前端·css·vue.js
小傅哥8 小时前
新项目完结,Ai Agent 智能体、拖拉拽编排!
前端·后端
ttod_qzstudio8 小时前
解决 Vue 3 + TypeScript 中 v-for 循环类型推断问题
前端·vue.js·typescript
一只小风华~8 小时前
Vue Router 的三种历史模式详解
前端·javascript·vue.js·笔记·学习·前端框架·ecmascript
前端_Coder8 小时前
Vue 3 watch 与 watchEffect ,哪个更好?
前端·vue.js·前端框架
一只小风华~8 小时前
Vue Router 导航守卫
java·前端·javascript·vue.js·笔记·html