在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的资料请关注脚本之家其它相关文章！
相关文章
props 是 React 组件通信最重要的手段，它在 React 的世界中充当的角色是十分重要的。学好 props 可以使组件间通信更加灵活，同时文中会介绍一些 props 的操作技巧，和学会如何编写嵌套组件2022-10-10
这篇文章主要介绍了如何使用 React Hooks 重构类组件,本文就来通过一些常见示例看看如何使用 React Hooks 来重构类组件，需要的朋友可以参考下2022-07-07
React Native:react-native-code-push报错的解决
这篇文章主要介绍了React Native:react-native-code-push报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了搭建 React Native 开发环境的详细过程,本文通过图文指令给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
在构建复杂的React应用时,组件之间的通信是至关重要的,从简单的父子组件通信到跨组件状态同步,不同组件之间的通信方式多种多样,下面我们认识react组件通信的几种方式,需要的朋友可以参考下2024-04-04
react+axios实现github搜索用户功能(示例代码)
这篇文章主要介绍了react+axios实现搜索github用户功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
简单来说就是使用自定义hook可以将某些组件逻辑提取到可重用的函数中。 自定义hook是一个从use开始的调用其他hook的Javascript函数，下面看下react中创建自定义hooks的相关知识，感兴趣的朋友一起看看吧2021-11-11
这篇文章主要为大家介绍了React前端解链表数据结构示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
React是用于构建用户界面的JavaScript库，本文主要介绍了如何创建自己的第一个React页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
本文主要介绍了React-Router6版本的更新引起的路由用法变化，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
最新评论