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.总结&第一章的面试题解答

21.demo

源码目录结构

源码中主要包括如下部分

• 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

方法二：

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