关于react.js: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 模式

17.context

18 事件零碎

19. 手写迷你版 react

20. 总结 & 第一章的面试题解答

源码目录构造

源码中次要包含如下局部

• 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/xiaochen10…

办法二：

1. clone 源码：git clone https://github.com/facebook/react.git
2. 依赖装置：npm install or yarn
3. 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