Javascript

react源码解析4.源码目录结构和调试

本文主要是介绍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/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
    
这篇关于react源码解析4.源码目录结构和调试的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!