react源码解析4.源码目录结构和调试

本文详细介绍了React源码的目录结构,包括fixtures、packages、scripts等关键部分,特别是针对packages中的react、react-dom、react-native-renderer等模块进行了说明。同时,文章还探讨了如何调试React源码,提供了两种方法,包括使用已构建的项目和从源码克隆、安装依赖及构建。
摘要由CSDN通过智能技术生成
源码目录结构

源码中主要包括如下部分

  • fixtures:为代码贡献者提供的测试React
  • packages:主要部分,包含Scheduler,reconciler等
  • scripts:react构建相关

下面来看下packages主要包含的模块

  • react:核心Api如:React.createElement、React.Component都在这

  • 和平台相关render相关的文件夹:

    react-art:如canvas svg的渲染
    react-dom:浏览器环境
    react-native-renderer:原生相关
    react-noop-renderer:调试或者fiber用

  • 试验性的包

    react-server: ssr相关

    react-fetch: 请求相关

    react-interactions: 和事件如点击事件相关

    react-reconciler: 构建节点

  • shared:包含公共方法和变量

  • 辅助包:

    react-is : 判断类型

    react-client: 流相关

    react-fetch: 数据请求相关

react-refresh: 热加载相关

  • scheduler:调度器相关

  • React-reconciler:在render阶段用它来构建fiber节点

怎样调试源码

本课程使用的react

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值