+ ```
+
+ - 使用精灵图
+
+- 代码分割：
+
+ - 通过 Webpack/Vite 实现代码的动态加载（code splitting），避免一次性加载整个应用的所有代码。
+
+## 构建工具的选择
+
+- Webpack/Vite 配置优化：
+
+ - Webpack：通过设置 splitChunks 和 bundle analyzer 进行代码拆分和打包优化。
+ - Vite：利用 Vite 的热更新和模块预构建功能，提升开发体验和构建速度。
+
+- 生产环境优化：
+
+ - 压缩代码、启用 Tree Shaking 删除无用代码、使用 Brotli 或 Gzip 压缩传输静态资源。
+
+## API 管理与数据获取
+
+- API 封装与抽象：
+
+ - 将所有 API 请求统一封装成服务模块（service layer），避免在组件中直接调用 fetch 或 axios。
+
+- 提供统一的错误处理和请求拦截：
+
+```js
+const axiosInstance = axios.create({ baseURL: '/api' })
+axiosInstance.interceptors.response.use(
+ response => response,
+ error => Promise.reject(error)
+)
+```
+
+## CI/CD 集成
+
+- 自动化构建与部署：
+
+ - 使用 GitHub Actions 或 Jenkins 配置CI/CD 流水线，自动运行测试和构建，并自动部署到生产环境。
+
+- Lint 检查：
+
+ - 在 CI 中集成 ESLint 和 Prettier 检查代码质量，确保代码风格统一。
+
+## 团队协作
+
+- Git 分支管理：
+
+ - 使用 Git Flow 或 Trunk-based Development 来管理开发过程中的多个分支，确保功能开发、测试和发布流程的规范性。
+
+- 代码评审和协作工具：
+
+ - 借助Code Review工具（如 GitHub、GitLab）进行代码评审，确保代码质量。
+ - 使用 Jira 或 Trello 来管理任务，确保团队协作有序。
diff --git a/docs/frontEnd/frame/React/Learn.md b/docs/frontEnd/frame/React/Learn.md
new file mode 100644
index 0000000..a024544
--- /dev/null
+++ b/docs/frontEnd/frame/React/Learn.md
@@ -0,0 +1,93 @@
+# 深入理解React
+
+深入理解 React
+
+## 组件的本质
+
+在 React 中，组件是核心构建单元。组件可以是函数组件或类组件，它们的本质都是 JavaScript 函数或类，接收 props 并返回 UI（通常是 JSX 语法描述的虚拟 DOM）。深入理解组件的渲染和生命周期，可以帮助你优化性能。
+
+关键要点：
+
+- 函数组件 vs 类组件：了解函数组件如何通过 Hooks 管理状态和副作用，并理解类组件的生命周期。
+- 无状态组件和有状态组件：无状态组件更容易优化，尽可能使用函数组件和 Hooks。
+- 受控组件和非受控组件：掌控表单处理时，使用受控组件能更精确地控制表单的状态。
+
+首先讲讲这个类组件。在`React`17.x，也就是`hooks`出现之前，只有类组件才有状态state这个`概念`，函数组件就是一个纯函数，纯函数即是`相同的输入得到相同的输出的这一类函数`，因此函数组件无法做到有状态。
+
+要做到有状态就需要类组件。类组件被设计如下进行状态管理，state即使这个组件的状态，通过`this.setState`来修改状态，并触发组件重新渲染
+
+```jsx
+import React, { Component } from 'react'
+
+class Counter extends Component {
+ constructor(props) {
+ super(props)
+ // 初始化 state
+ this.state = {
+ count: 0
+ }
+ }
+
+ // 增加计数的方法
+ incrementCount = () => {
+ // 更新状态
+ this.setState({ count: this.state.count + 1 })
+ }
+
+ render() {
+ return (
+ Count: {this.state.count}
+ +