React源码解读

配置React源码本地调试环境

本次环境构建采用了node版本为16、react-scripts 版本号为 3.4.4,源码下载地址 react源码调试: react源码调试环境

使用 create-react-app 脚手架创建项目

javascript 复制代码
npx create-react-app react-test

进入刚刚下载的目录,弹射 create-react-app 脚手架内部配置

javascript 复制代码
// 在 npm run eject 之前,手动将项目 package.json 里面 react-scripts 版本号改为低版本的 3.4.4,删除 node_modules 后重装,确保使用老版本脚手架
npm run eject

克隆 react 官方源码 (在项目的根目录下进行克隆)

javascript 复制代码
git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react

接着链接本地源码

javascript 复制代码
// 文件位置: react-test/config/webpack.config.js
resolve: {
  alias: {
    "react-native": "react-native-web",
      "react": path.resolve(__dirname, "../src/react/packages/react"),
      "react-dom": path.resolve(__dirname, "../src/react/packages/react-dom"),
      "shared": path.resolve(__dirname, "../src/react/packages/shared"),
      "react-reconciler": path.resolve(__dirname, "../src/react/packages/react-reconciler"),
      "legacy-events": path.resolve(__dirname, "../src/react/packages/legacy-events"),
      'scheduler/tracing': path.resolve(__dirname, "../src/react/packages/scheduler/src/Tracing")
  }
}

修改环境变量

javascript 复制代码
// 文件位置: react-test/config/env.js
const stringified = {
	"process.env": Object.keys(raw).reduce((env, key) => {
   	env[key] = JSON.stringify(raw[key])
      return env
   }, {}),
   __DEV__: true,
   SharedArrayBuffer: true,
   spyOnDev: true,
   spyOnDevAndProd: true,
   spyOnProd: true,
   __PROFILE__: true,
   __UMD__: true,
   __EXPERIMENTAL__: true,
   __VARIANT__: true,
   gate: true,
   trustedTypes: true
 }

告诉 babel 在转换代码时忽略类型检查

javascript 复制代码
安装:npm install @babel/plugin-transform-flow-strip-types -D
// 文件位置: react-test/config/webpack.config.js [babel-loader]
找到: loader: require.resolve('babel-loader'),
plugins: [
 + require.resolve("@babel/plugin-transform-flow-strip-types"),
]

导出 HostConfig

javascript 复制代码
// 文件位置: /react/packages/react-reconciler/src/ReactFiberHostConfig.js
+ export * from './forks/ReactFiberHostConfig.dom';
- invariant(false, 'This module must be shimmed by a specific renderer.');

修改 ReactSharedInternals.js 文件

javascript 复制代码
// 文件位置: /react/packages/shared/ReactSharedInternals.js
- import * as React from 'react';
- const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+ import ReactSharedInternals from '../react/src/ReactSharedInternals';

关闭 eslint 扩展

javascript 复制代码
// 文件位置: react/.eslingrc.js [module.exports]
// 注释 extends
- extends: [
-  'fbjs',
- 'prettier'
-]

禁止 invariant 报错

javascript 复制代码
// 文件位置: /react/packages/shared/invariant.js
export default function invariant(condition, format, a, b, c, d, e, f) {
+  if (condition) return;
  throw new Error(
    'Internal React error: invariant() is meant to be replaced at compile ' +
      'time. There is no runtime version.',
  );
}

在 react 源码文件夹中新建 .eslintrc.json 并添加如下配置

javascript 复制代码
{
  "extends": "react-app",
  "globals": {
    "SharedArrayBuffer": true,
    "spyOnDev": true,
    "spyOnDevAndProd": true,
    "spyOnProd": true,
    "__PROFILE__": true,
    "__UMD__": true,
    "__EXPERIMENTAL__": true,
    "__VARIANT__": true,
    "gate": true,
    "trustedTypes": true
  }
}

修改 项目中(index.js app.js)react react-dom 引入方式

javascript 复制代码
import * as React from "react"
import * as ReactDOM from "react-dom"

解决 vsCode 中 flow 报错

javascript 复制代码
// vscode设置
"javascript.validate.enable": false

可选项配置

javascript 复制代码
// 如果你的 vscode 编辑器安装了 prettier 插件并且在保存 react 源码文件时右下角出现如下错误,按照如下步骤解决
// 全局安装 prettier
npm i prettier -g
// 配置 prettier path
Settings > Extensions > Prettier > Prettier path

解决__DEV__ 报错

javascript 复制代码
删除 node_modules 文件夹,执行 npm install
相关推荐
crary,记忆8 分钟前
Angular如何让整个项目的所有页面能够整体缩小一定的比例?
javascript·ecmascript·angular.js
Mintopia23 分钟前
🤖 算法偏见修正:WebAI模型的公平性优化技术
前端·javascript·aigc
Mintopia26 分钟前
🧩 TypeScript防御性编程:让Bug无处遁形的艺术
前端·typescript·函数式编程
JarvanMo28 分钟前
🔔 Flutter 本地通知: 吸引用户的完整指南—即使在他们离线时也能实现
前端
你想考研啊33 分钟前
一、redis安装(单机)和使用
前端·数据库·redis
江城开朗的豌豆35 分钟前
小程序与H5的“握手言和”:无缝嵌入与双向通信实战
前端·javascript·微信小程序
天蓝色的鱼鱼35 分钟前
React 19 发布一年后:对比 React 18,带来了哪些惊喜与变革
前端·react.js
你的电影很有趣39 分钟前
lesson73:Vue渐进式框架的进化之路——组合式API、选项式对比与响应式新范式
javascript·vue.js
江城开朗的豌豆40 分钟前
小程序静默更新?用户却无感?一招教你“强提醒”
前端·javascript·微信小程序
小张成长计划..41 分钟前
VUE工程化开发模式
前端·javascript·vue.js