在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的资料请关注脚本之家其它相关文章！
相关文章
useSWR 是一个 React Hooks,是 HTTP 缓存库 SWR 的核心方法之一,SWR 是一个轻量级的 React Hooks 库,通过自动缓存数据来实现 React 的数据获取,本文给大家介绍react:swr接口缓存案例详解,感兴趣的朋友一起看看吧2023-11-11
React Hooks的useState、useRef使用小结
React Hooks 是 React 16.8 版本引入的新特性，useState和useRef是两个常用的Hooks，本文主要介绍了React Hooks的useState、useRef使用，感兴趣的可以了解一下2024-01-01
本篇文章通过完整的代码给大家介绍了react-player实现视频播放与自定义进度条效果，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-01-01
本文主要介绍了React使用有限状态机的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家介绍了React Native项目设置路径别名实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了useEffect支持async及await的使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
SOLID 是一套原则，它们主要是关心代码质量和可维护性的软件专业人员的指导方针，本文给大家分享如何在React中应用SOLID原则，感兴趣的朋友一起看看吧2022-07-07
本篇文章主要介绍了React + webpack 环境配置的方法步骤，详解的介绍了开发环境的配置搭建，有兴趣的可以了解一下2017-09-09
React组件用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，这篇文章主要介绍了React组件的用法和理解,需要的朋友可以参考下2023-02-02
react项目升级报错,babel报错,.babelrc配置兼容等问题及解决
这篇文章主要介绍了react项目升级报错,babel报错,.babelrc配置兼容等问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论