2026-04-29 22:19:51 +08:00
|
|
|
|
---
|
|
|
|
|
|
tags: [React, TypeScript, Frontend, UI]
|
|
|
|
|
|
create time: 2026-04-29 21:57
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
# React 知识库
|
|
|
|
|
|
|
|
|
|
|
|
## 概述
|
|
|
|
|
|
|
|
|
|
|
|
React 是 Meta 维护的前端 UI 库，通过组件化开发和虚拟 DOM 实现了高效的用户界面构建。本知识库系统整理 React 的核心概念、Hooks 体系、生态工具和工程实践。
|
|
|
|
|
|
|
|
|
|
|
|
## 目录索引
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 基础篇
|
|
|
|
|
|
|
|
|
|
|
|
- **[01-环境搭建与项目结构](./1. 基础篇/01-环境搭建与项目结构.md)** — Vite/CRA 脚手架选型、目录规范、TS 配置、开发习惯
|
|
|
|
|
|
- **[02-JSX 语法](./1. 基础篇/02-JSX 语法.md)** — JSX 表达式、条件渲染、列表渲染、事件绑定、Props 传递
|
|
|
|
|
|
- **[03-组件与 Props](./1. 基础篇/03-组件与 Props.md)** — 函数组件、组件拆分原则、Props 类型校验、组件组合模式
|
|
|
|
|
|
- **[04-State 与不可变性](./1. 基础篇/04-State 与不可变性.md)** — State 设计原则、浅比较、嵌套对象更新、状态提升
|
|
|
|
|
|
|
|
|
|
|
|
### 2. Hooks 篇
|
|
|
|
|
|
|
|
|
|
|
|
- **[05-核心 Hooks](./2. Hooks 篇/05-核心 Hooks.md)** — useState / useEffect / useContext / useRef 原理与最佳实践
|
|
|
|
|
|
- **[06-性能优化 Hooks](./2. Hooks 篇/06-性能优化 Hooks.md)** — useMemo / useCallback / useTransition / useDeferredValue
|
|
|
|
|
|
- **[07-自定义 Hooks](./2. Hooks 篇/07-自定义 Hooks.md)** — Hook 命名规范、逻辑复用模式、常见 Hook 封装（useFetch、useDebounce、useLocalStorage）
|
|
|
|
|
|
|
|
|
|
|
|
### 3. 生态工具篇
|
|
|
|
|
|
|
|
|
|
|
|
- **[08-路由管理](./3. 生态工具篇/08-路由管理.md)** — React Router v7、嵌套路由、Lazy Component、动态路由、路由守卫
|
|
|
|
|
|
- **[09-状态管理](./3. 生态工具篇/09-状态管理.md)** — Context API vs Zustand vs Redux Toolkit 选型对比
|
|
|
|
|
|
- **[10-TS + React](./3. 生态工具篇/10-TS + React.md)** — Props/TState 泛型定义、Hook 类型推导、Ref 类型、 discriminated union
|
|
|
|
|
|
|
|
|
|
|
|
### 4. 进阶篇
|
|
|
|
|
|
|
2026-04-29 23:36:32 +08:00
|
|
|
|
- **[11-组件通信模式](./4. 进阶篇/11-组件通信模式.md)** — Props Drill → Context（含性能陷阱）→ 兄弟状态提升 → 状态管理库 → Imperative Refs
|
2026-04-29 22:19:51 +08:00
|
|
|
|
- **[12-HOC 与 Render Props](./4. 进阶篇/12-HOC 与 Render Props.md)** — 高阶组件模式、Render Props 模式、为什么 Hook 更受欢迎
|
|
|
|
|
|
- **[13-并发特性](./4. 进阶篇/13-并发特性.md)** — Suspense、useSuspenseQuery、Transitions、时间切片原理
|
|
|
|
|
|
- **[14-Serverside Rendering](./4. 进阶篇/14-Serverside Rendering.md)** — Next.js App Router、SSR/SSG/ISR 渲染策略、Stream SSR
|
|
|
|
|
|
|
|
|
|
|
|
### 5. 工程实践篇
|
|
|
|
|
|
|
|
|
|
|
|
- **[15-性能优化](./5. 工程实践篇/15-性能优化.md)** — React.memo、虚拟列表、Code Splitting、Bundle 分析、Lighthouse 调优
|
|
|
|
|
|
- **[16-测试](./5. 工程实践篇/16-测试.md)** — Vitest + React Testing Library、单元测试、集成测试、边界 case 覆盖
|
|
|
|
|
|
- **[17-可访问性](./5. 工程实践篇/17-可访问性.md)** — ARIA 属性、键盘导航、语义化 HTML、屏幕阅读器适配
|
|
|
|
|
|
- **[18-迁移与升级](./5. 工程实践篇/18-迁移与升级.md)** — Class → Function 迁移、Concurrent Mode 兼容、Major Version 升级 Checklist
|
|
|
|
|
|
|
|
|
|
|
|
## 核心架构
|
|
|
|
|
|
|
|
|
|
|
|
```mermaid
|
|
|
|
|
|
graph TB
|
|
|
|
|
|
subgraph "开发者层"
|
|
|
|
|
|
A[JSX / TSX] --> B[组件树]
|
|
|
|
|
|
end
|
|
|
|
|
|
|
|
|
|
|
|
subgraph "React 核心"
|
|
|
|
|
|
B --> C[Fiber Scheduler]
|
|
|
|
|
|
C --> D[Reconciler]
|
|
|
|
|
|
D --> E[Commit Phase]
|
|
|
|
|
|
E --> F[Effects Queue]
|
|
|
|
|
|
end
|
|
|
|
|
|
|
|
|
|
|
|
subgraph "DOM 层"
|
|
|
|
|
|
F --> G[Virtual DOM Diff]
|
|
|
|
|
|
G --> H[真实 DOM Patch]
|
|
|
|
|
|
H --> I[(Browser)]
|
|
|
|
|
|
end
|
|
|
|
|
|
|
|
|
|
|
|
style B fill:#61DAFB,color:#000
|
|
|
|
|
|
style C fill:#4FC08D,color:#fff
|
|
|
|
|
|
style I fill:#A0AEC0,color:#fff
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 关联笔记
|
