写点什么

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

用户头像
全栈潇晨
关注
发布于: 2021 年 06 月 03 日

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
复制代码


发布于: 2021 年 06 月 03 日阅读数: 8
用户头像

全栈潇晨

关注

还未添加个人签名 2021.02.17 加入

还未添加个人简介

评论

发布
暂无评论
react源码解析4.源码目录结构和调试