在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中useRef的具体使用，它可以用来获取组件实例对象或者是DOM对象，除此之外还有哪些用法，就一起来了解一下2021-04-04
笔者最近用react useEffect闭包，其中踩到了一些坑在此与大家分享一下。需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了React中的生命周期用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
React实现控制减少useContext导致非必要的渲染详解
这篇文章主要介绍了React如何有效减少使用useContext导致的不必要渲染,使用useContext在改变一个数据时，是通过自己逐级查找对比改变的数据然后渲染，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了基于react项目打包css引用路径错误解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
对于刚学前端的大家来说,对于React中的事件监听写法有所疑问很正常，特别是React中箭头函数使用这块，下面这篇文章主要给大家深入的讲解了关于React中何时使用箭头函数的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-08-08
React 是一个用于构建用户界面的 Javascript库，接下来将通过实战小红书首页的详细介绍其设计思路和方法，将读者带入到react的开源世界,需要的朋友可以参考下2022-07-07
本文将介绍在React Native开发中常见的性能优化问题和解决方案,包括ScrollView内无法滑动、热更新导致的文件引用问题、高度获取、强制横屏UI适配、低版本RN适配iOS14、缓存清理、navigation参数取值等,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要为大家详细介绍了如何在React中实现插槽，文中的示例代码讲解详细，对我们的学习或工作具有一定的借鉴价值，需要的可以了解一下2023-03-03
这篇文章主要为大家介绍了ahooks useInfiniteScroll源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
最新评论