Muliminty Note

结构说明

7分钟阅读

React 文件夹结构说明

React 知识体系的文件夹组织结构说明

📁 完整目录结构

React/
├── !MOC-React.md                    # React 知识体系总索引
├── README.md                        # React 知识体系概览
├── 结构说明.md                      # 本文件
│
├── 01-基础入门/                     # 基础概念和语法
│   ├── README.md
│   ├── 01-语法基础/
│   │   ├── README.md
│   │   └── 01-JSX-语法.md
│   ├── 02-组件基础/
│   │   ├── README.md
│   │   └── 02-组件（Components）.md
│   ├── 03-状态管理/
│   │   ├── README.md
│   │   ├── 03-createContext.md      # 原子化：createContext
│   │   ├── 04-Provider.md           # 原子化：Provider
│   │   └── 05-useContext.md         # 原子化：useContext
│   └── 04-事件处理/
│       └── README.md
│
├── 02-核心机制/                     # React 工作原理
│   ├── README.md
│   ├── 01-渲染机制/
│   │   ├── README.md
│   │   └── 01-React-作为-UI-运行时.md
│   ├── 02-生命周期/
│   │   └── README.md
│   └── 03-事件系统/
│       └── README.md
│
├── 03-Hooks深度理解/                # Hooks 原理和使用
│   ├── README.md
│   ├── 01-基础Hooks/
│   │   ├── README.md
│   │   ├── 01-useEffect-完整指南.md
│   │   ├── 03-useContext-完整指南-详细版.md
│   │   └── 04-Context-API-完整体系.md  # 串联文档
│   ├── 02-进阶Hooks/
│   │   └── README.md
│   ├── 03-自定义Hooks/
│   │   └── README.md
│   └── 04-原理深入/
│       ├── README.md
│       └── 02-Hooks-调用顺序的重要性.md
│
├── 04-组件设计模式/                 # 组件设计最佳实践
│   ├── README.md
│   ├── 01-设计原则/
│   │   ├── README.md
│   │   ├── 01-编写健壮的组件.md
│   │   └── 02-UI-工程的要素.md
│   ├── 02-设计模式/
│   │   └── README.md
│   └── 03-组件通信/
│       └── README.md
│
├── 05-性能优化/                     # 性能优化技巧
│   ├── README.md
│   └── 01-Before-You-memo.md
│
├── 06-高级特性/                     # 高级特性和 API
│   └── README.md
│
├── 07-表单处理/                     # 表单处理方案
│   └── README.md
│
├── 08-路由管理/                     # 路由管理方案
│   └── README.md
│
├── 09-样式处理/                     # 样式处理方案
│   └── README.md
│
├── 10-服务端渲染/                   # SSR 和 RSC
│   └── README.md
│
├── 11-React生态/                    # React 生态系统
│   └── README.md
│
├── 12-最佳实践/                     # 开发最佳实践
│   └── README.md
│
└── 13-原理深入/                     # React 源码和原理
    └── README.md

🎯 组织原则

1. 原子化原则

  • 每个基础概念独立成文件
  • 例如：createContext、Provider、useContext 分别独立

2. 层次化原则

  • 基础入门：基础概念，原子化文档
  • 深度理解：串联理解，完整体系
  • 原理深入：底层原理，源码解析

3. 分类清晰

  • 按功能分类（语法、组件、Hooks、性能等）
  • 按难度分类（基础、进阶、高级）
  • 按主题分类（设计模式、生态、最佳实践）

4. 便于扩展

  • 每个文件夹都有 README 说明
  • 预留扩展空间（空文件夹已创建）
  • 结构清晰，易于添加新内容

📚 文件组织说明

基础入门（01-基础入门）

目的：掌握 React 核心概念

  • 01-语法基础：JSX 语法
  • 02-组件基础：组件概念
  • 03-状态管理：Context API 基础（原子化）
  • 04-事件处理：事件处理基础

核心机制（02-核心机制）

目的：理解 React 工作原理

  • 01-渲染机制：虚拟 DOM、Diff 算法
  • 02-生命周期：组件生命周期
  • 03-事件系统：事件系统原理

Hooks 深度理解（03-Hooks深度理解）

目的：深入理解 Hooks

  • 01-基础Hooks：useState、useEffect、useContext（包含串联文档）
  • 02-进阶Hooks：useMemo、useCallback、useRef
  • 03-自定义Hooks：自定义 Hooks 实践
  • 04-原理深入：Hooks 实现原理

组件设计模式（04-组件设计模式）

目的：组件设计最佳实践

  • 01-设计原则：组件设计原则
  • 02-设计模式：常见设计模式
  • 03-组件通信：组件间通信

其他模块

  • 05-性能优化：性能优化技巧
  • 06-高级特性：高级 API
  • 07-表单处理：表单处理方案
  • 08-路由管理：路由管理方案
  • 09-样式处理：样式处理方案
  • 10-服务端渲染：SSR 和 RSC
  • 11-React生态：生态系统
  • 12-最佳实践：开发最佳实践
  • 13-原理深入：React 源码解析

🔗 文档关联

Context API 学习路径

基础概念（原子化）
├── 01-基础入门/03-状态管理/03-createContext.md
├── 01-基础入门/03-状态管理/04-Provider.md
└── 01-基础入门/03-状态管理/05-useContext.md
         ↓
深度理解（串联）
└── 03-Hooks深度理解/01-基础Hooks/04-Context-API-完整体系.md
         ↓
详细解析（完整指南）
└── 03-Hooks深度理解/01-基础Hooks/03-useContext-完整指南-详细版.md

📝 扩展指南

添加新内容

  1. 基础概念 → 放在 01-基础入门 对应子文件夹
  2. 深度理解 → 放在 03-Hooks深度理解 对应子文件夹
  3. 设计模式 → 放在 04-组件设计模式 对应子文件夹
  4. 性能优化 → 放在 05-性能优化
  5. 其他主题 → 放在对应的编号文件夹

命名规范

  • 基础概念：使用简洁的名称，如 03-createContext.md
  • 深度理解：使用描述性名称，如 01-useEffect-完整指南.md
  • 串联文档：使用”完整体系”、“组合使用”等词汇

✅ 结构优势

  1. 原子化：基础概念独立，便于学习和查阅
  2. 层次化：从基础到深入，循序渐进
  3. 系统化：分类清晰，结构完整
  4. 可扩展：预留空间，易于添加新内容
  5. 易维护：每个文件夹有 README，说明清晰

react 知识体系 文件组织

关系图谱