react源码解析4.源码目录结构和调试
react源码解析4.源码目录结构和调试
视频课程（高效学习）：进入课程
课程目录：
1.开篇介绍和面试题
2.react的设计理念
3.react源码架构
4.源码目录结构和调试
5.jsx&核心api
6.legacy和concurrent模式入口函数
7.Fiber架构
8.render阶段
9.diff算法
10.commit阶段
11.生命周期
12.状态更新流程
13.hooks源码
14.手写hooks
15.scheduler&Lane
16.concurrent模式
【react源码解析4.源码目录结构和调试】17.context
18事件系统
19.手写迷你版react
20.总结&第一章的面试题解答
21.demo
源码目录结构
源码中主要包括如下部分
- fixtures：为代码贡献者提供的测试React
- packages：主要部分，包含Scheduler，reconciler等
- scripts：react构建相关
- 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: 数据请求相关
- scheduler：调度器相关
- React-reconciler：在render阶段用它来构建fiber节点
方法一：可以用现成的包含本课程所有demo的项目来调试，建议使用已经构建好的项目，地址：https://github.com/xiaochen10...
方法二：
- clone源码：
git clone https://github.com/facebook/react.git - 依赖安装：
npm installoryarn - 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
推荐阅读
- Android事件传递源码分析
- react|react 安装
- Quartz|Quartz 源码解析(四) —— QuartzScheduler和Listener事件监听
- Java内存泄漏分析系列之二（jstack生成的Thread|Java内存泄漏分析系列之二：jstack生成的Thread Dump日志结构解析）
- [源码解析]|[源码解析] NVIDIA HugeCTR，GPU版本参数服务器---(3)
- ffmpeg源码分析01（结构体）
- Android系统启动之init.rc文件解析过程
- Java程序员阅读源码的小技巧，原来大牛都是这样读的，赶紧看看！
- 小程序有哪些低成本获客手段——案例解析
- Vue源码分析—响应式原理(二)