react源码解析--源码目录结构和调试
2023-02-18 15:49:45 时间
源码目录结构
源码中主要包括如下部分
- 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
相关文章
- 开箱即用区块链是一种什么体验?Lighthouse长安链给你答案
- 活动回顾 | 基于信任基础设施实现数据要素可信流通
- 【openfilier】配置iSCSI存储
- 【VMware vSphere 7】虚拟化概述(一)
- 【VMware vSphere 7】安装配置ESXi 7主机(二)
- 【VMware vSphere 7】基于ESXi主机中安装部署NTP服务器(三)
- 【VMware vSphere 7】基于ESXi主机安装部署DNS服务器(四)
- 【VMware vSphere 7】安装部署VCSA(五)
- 【Docker三连问】什么是Docker? | Docker风靡原因? | 如何安装使用Docker?
- 【Docker】Docker常见命令汇总
- 【docker-compose】一键部署WordPress博客
- 解决win10虚拟机中,浏览器右击访问菜单栏泛强光现象
- 【Docker Swarm】搭建Docker Swarm高可用集群(详细版)
- Vite真香之路
- DAS Over FC 技术允许 ATTO 分解存储并完成 vSAN 认证套件
- 【Keychron K3】一款兼容Mac系统的矮轴机械键盘 | 推荐
- fsl-imx-xll-glibc交叉编译boa服务器
- 怎么才算是一个合格的coder
- 电总协议调试助手V1.0.4发布
- 爬虫浏览器的Cloudflare五秒盾处理