在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。

第一步： 

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

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

第二步：

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

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

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

流程图如下：

3. 开始实施。

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的资料请关注脚本之家其它相关文章！