---
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
```

## 关联笔记