如何在console 里打印 React Fiber 树？

猴赛雷2024-04-10 17:48

众所周知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。

第一步：

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

又或者是通过createRoot 进而render 。如下图：
第二步：

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

如何在console 里 打印 React Fiber 树？

如何在console 里打印 React Fiber 树？