在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的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了详解如何优雅地在React项目中使用Redux，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本篇文章主要介绍了浅谈React + Webpack 构建打包优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了React中多语言的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了React Hook父组件如何获取子组件的数据/函数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文介绍了React脚手架（CreateReactApp）的使用指南,包括创建项目、项目结构、常用命令、最佳实践、常见问题解决以及脚手架的优势,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要介绍了React Redux Hooks的使用详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
React 的 setState 批量更新是 React 优化性能的重要机制,它通过减少不必要的渲染次数来提高应用性能,下面我将详细解释这一过程,需要的朋友可以参考下2025-05-05
React实现数字滚动组件numbers-scroll的示例详解
数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件。本文将利用React实现这一组件，感兴趣的小伙伴可以了解一下2023-03-03
这篇文章主要介绍了使用hooks写React组件需要注意的5个地方，帮助大家更好的理解和学习使用React组件，感兴趣的朋友可以了解下2021-04-04
详解React Native 采用Fetch方式发送跨域POST请求
这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论