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/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/reactnpm linkcd build/node_modules/react-domnpm link

  • create-react-app创立我的项目

    npx create-react-app demonpm link react react-dom