关于react.js:react源码解析4源码目录结构和调试

41次阅读

共计 1205 个字符,预计需要花费 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/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

正文完
 0