Init

2026-05-24 11:42:38 +08:00
commit 30d312ac35
521 changed files with 146481 additions and 0 deletions
@@ -0,0 +1,73 @@
+---
+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
+```
+
+## 关联笔记