react源码解析4.源码目录结构和调试_2023-02-06
2023-06-13 09:16:56 时间
源码目录结构
源码中主要包括如下部分
- 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_code_build
方法二:
- 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
相关文章
- pycharm怎么调试程序_简单辅助调试
- Vue3源码02: 项目构建流程和源码调试方法
- Android 真机调试与无线调试
- leveldb源码编译和调试
- React源码学习入门(三)React源码codebase架构和调试介绍
- IDEA 调试起来太费劲?你需要了解这几招!
- Junit单元测试教程_单元测试调试react源码
- 我是怎么调试 Element UI 源码的
- 我是怎么调试 Element UI 源码的
- 实操 | 10分钟带你轻松掌握 Kafka 源码编译环境搭建,调试无忧!
- 人生苦短,我用Python-手把手教你如何使用python写串口调试助手
- Redis 7.0 源码调试环境搭建与源码导读技巧
- HTTPS调试中自签名证书错误ERR_CERT_COMMON_NAME_INVALID的解决方法
- 难调试的bug
- RocketMQ源码本地搭建调试
- 一个可以更好地调试的 Perl 模块
- 使用PDO连接MSSQL失败:调试方案解析(pdo连接mssql失败)
- 深入调试如何查看Redis报错日志(查看redis报错的日志)
- JS调试必备的5个debug技巧
- phpstorm配置Xdebug进行调试PHP教程