Mini React 之整体架构介绍

1. 项目结构

2. 项目介绍

2.1 依赖介绍

devDependencies：

{
  "@babel/core": "^7.16.0",
  "@babel/plugin-transform-react-jsx": "^7.17.12",
  "babel-loader": "^8.2.3",
  "html-webpack-plugin": "^5.5.0",
  "webpack": "^5.63.0",
  "webpack-cli": "^4.9.1",
  "webpack-dev-server": "^4.9.0"
}

我们的项目打包工具使用webpack，编译转换依赖于babel平台。使用@babel/plugin-transform-react-jsxbabel插件做JSX转换，我们重点是理解React的原理而不是编译部分，所以JSX转换插件直接使用官方插件，后面可以再手动实现一下这个JSX转换插件。然后使用babel-loader编译js文件。使用html-webpack-plugin + webpack-dev-server搭建开发服务器，便于我们验证实际的渲染结果。

2.2 文件功能

• jsx.js：jsx语法糖相关逻辑，主要实现@babel/plugin-transform-react-jsx插件所需要的React.createElement方法，用于将jsx语法糖转成拟DOM。
• element.js：声明所有需要用到的React元素标识及一些常量。
• component.js：类组件实现及更新器相关实现。
• react-dom.js：runtime-dom相关逻辑，将虚拟DOM渲染(mount)成真实dom，根据拟DOM对真实dom进行增、删、改、查操作。
• react.js：runtime-core相关逻辑，主要是一些React的核心方法。
• event.js：React事件处理逻辑，包括事件缓存、事件代理、事件派发等。
• hooks.js：react hooks功能的基本实现，主要理解hooks原理和执行机制。
• utils.js：存放一些工具函数。