React源码阅读

React进阶学习

源码阅读流程

下载源码
观察package.json：
1. 主要使用的依赖
2. 构建相关的脚本
根据核心API找寻结构：
1. packages/react
2. packages/react-dom
3. packages/react-reconciler
4. packages/scheduler
串联整个流程：
1. 项目初始化
  1. ReactDOM.render
  2. createRoot
2. 数据更新流程
  1. this.setState
  2. const[_,update] = useState()
  3. forupdate
3. 基本API的使用方式
  1. hooks
  2. useState
  3. useReducer
  4. useId

1	git clone https://github.com/facebook/react.git

monorepo是一种项目管理方式。指在单个仓库中管理多个项目

monorepo演进

阶段一，单仓库巨石应用：Monolith

一个Git仓库维护项目所有代码，项目代码随业务复杂度增加而增多，成为单体巨石应用。

阶段二，多仓库多模块应用：Multirepo

项目被拆分为多个业务模块，对应多个Git仓库，模块解耦，降低应用复杂度，每个模块可以独立测试开发。模块仓库随业务复杂度增加二增多，难以进行项目管理，跨仓库共享难，模块依赖管理复杂，增加了项目构建耗时

阶段三，单仓库多模块应用：Monorepo

将多个项目集成到一个仓库下，共享工程配置，同时快捷地共享模块代码。

一段JSX代码：

const name = 'Jack'
const dv = (
	<div>你好，我叫：{name} </div>
)

如果想要编译为一段可用的js代码，需要经过babel编译，而babel又需要借助插件@babel/plugin-transform-react-jsx才能便利jsx。

通过React学习我们知道所有JSX语法最终会被编译为React.createElement方法的调用

上述代码经过编译后会变为：

1 2	const name = 'jack' const dv = React.createElement("div", null, name)

从ReactClient.js文件入手，可以看到React暴露给开发者的核心API