react源码解析4.源码目录结构和调试
2023-03-20 14:52:52 时间
react源码解析4.源码目录结构和调试
视频课程(高效学习):进入课程
源码目录结构
源码中主要包括如下部分
- 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版本是17.0.1,通过下面几步就可以调试源码了,
方法一:可以用现成的包含本课程所有demo的项目来调试,建议使用已经构建好的项目,地址:https://github.com/xiaochen1024/react_source_demo
方法二:
- clone源码:
git clone https://github.com/facebook/react.git
- 依赖安装:
npm install
oryarn
- build源码:npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE
- 为源码建立软链: cd build/node_modules/react npm link cd build/node_modules/react-dom npm link
- create-react-app创建项目 npx create-react-app demo npm link react react-dom
相关文章
- 大品牌强势,手机小厂们的未来在哪里?
- 四个拦路虎,击碎中小厂商的5G逆袭梦
- 疫情中的苹果财报:iPhone 销量下滑,但 iPhone 12 不能迟到
- 苹果更新iOS:戴口罩解锁iPhone可直接跳转密码界面
- 苹果谷歌为何走到一起?联系人跟踪API开发背后的故事
- Android 11 DP3新功能汇总:独立设置曲面屏左右手势灵敏度
- 苹果谷歌接触者追踪软件首个版本4月28日发布
- 新软件可流式传输应用程序,以节省你手机上的空间!
- 外媒爆料iOS 14源代码泄露 系统新特性前瞻!
- 苹果谷歌的健康码暴露出“数字鸿沟”:20亿部旧手机无法使用
- 一个UI按钮的自我修养
- 升级版短信:“5G消息”将于年内上线
- 最新macOS破坏SSH默认规则,程序员无法登录Web服务器
- 新基建中如何保证软件质量?云测试成热门服务
- 支付宝城市服务正式升级为市民中心:功能更多
- 苹果iOS 14系统面板截图曝光:加入全新墙纸设置,或加入主屏小部件
- 2019年手机浏览器市场份额排行榜,极简的夸克未上榜
- 如何成功实现移动设备管理
- 外观回归经典,苦等已久的iPhone 9,4月发布!
- 工信部回应“中国手机用户暴减”:两方面原因所致