react 源码解析 4. 源码目录结构和调试
react 源码解析 4.源码目录结构和调试
视频课程(高效学习):进入课程
课程目录:
源码目录结构
源码中主要包括如下部分
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
方法二:
clone 源码:
git clone https://github.com/facebook/react.git
依赖安装:
npm install
oryarn
build 源码:npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE
为源码建立软链:
create-react-app 创建项目
评论