如何在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和工具来管理组件和调试应用程序。

相关推荐
我叫汪枫2 小时前
前端物理引擎库推荐 - 让你的网页动起来!
前端
雾恋7 小时前
最近一年的感悟
前端·javascript·程序员
A黄俊辉A7 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理8 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
连合机器人8 小时前
晨曦中的守望者:当科技为景区赋予温度
java·前端·科技
郑板桥309 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
慢半拍iii10 小时前
JAVA Web —— A / 网页开发基础
前端
gnip10 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
新手村领路人11 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@11 小时前
css3新增-网格Grid布局
前端·css·css3