all-in-kingsoft/hhs/REACT

tags, create time

tags	create time
React TypeScript Frontend UI	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

核心架构

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

关联笔记