74 lines
3.5 KiB
Markdown
74 lines
3.5 KiB
Markdown
---
|
||
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. 进阶篇
|
||
|
||
- **[11-组件通信模式](./4. 进阶篇/11-组件通信模式.md)** — Props Drill → Context（含性能陷阱）→ 兄弟状态提升 → 状态管理库 → Imperative Refs
|
||
- **[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
|
||
```
|
||
|
||
## 关联笔记
|