React 领域总览：边界、心智模型与学习目标

一句话定义

React 是一个用于构建用户界面的 JavaScript 库，核心思想是「UI = f(state)」：把界面当作状态的纯函数，状态变化时由 React 负责高效地计算并更新真实 DOM。

为什么重要

生态事实标准：React 是全球使用最广的前端框架之一，Next.js、React Native、大量企业前端栈都建立在其上；掌握 React 意味着同时打开了 Web 与移动端（React Native）两扇门。
心智模型可迁移：声明式、组件化、单向数据流这些思想已被 Vue、SwiftUI、Flutter 等吸收。学会 React 的思考方式，比背 API 更保值。
持续演进中的范式：并发渲染、Server Components、Actions 让「前端框架的边界在哪里」这个问题在 React 上持续被重新回答——学习它能同时理解前端工程的过去与未来。

领域边界（本知识库覆盖什么 / 不覆盖什么）

覆盖：

React 库本身：JSX、组件、Props、State、Hooks、渲染与协调机制。
运行时与性能：重渲染、记忆化、并发调度、Suspense、Error Boundary。
生态关键层：状态管理与数据获取的选型思路、测试、React 19 新特性、Server Components 与元框架（以 Next.js 为代表）。
实践与工程化：常见反模式、代码审查清单、自定义 Hook 设计。

不覆盖（后续扩展方向）：

CSS-in-JS / Tailwind 等样式方案的深度对比（仅在反模式中提及）。
React Native 移动端开发（原理同源，但平台 API 完全不同，值得单独建库）。
Next.js 的服务端部署与运维细节（仅覆盖其与 React 概念的交界处）。
TypeScript 与 React 的类型体操（示例以 JS 为主，类型相关的惯例会顺带提及）。

前置知识

HTML / CSS 基础：能读懂一个页面的结构。
JavaScript：ES6+ 的函数、箭头函数、解构、数组方法（map/filter）、模块 import/export、Promise 与 async/await。这是唯一真正的前置门槛。
不需要：类组件（历史产物，2026 年学习路线直接从函数组件 + Hooks 开始）、复杂算法。

学习目标（完成本知识库后你应该能够）

用函数组件 + Hooks 独立写出多页面、含数据获取的交互应用。
能解释一段 React 代码「为什么会这样渲染」：渲染 → 协调 → 提交的完整链路。
能定位并修复典型性能问题（无意义的重渲染、不当的 key、错误的 effect 依赖）。
能在技术选型中说清状态库、数据获取方案、元框架的取舍依据。
能读懂 React 19 / RSC 时代的新范式代码，并判断何时值得引入。

知识树总览

textReact
├── 01 基础（建立心智模型）
│   ├── React 是什么与心智模型        kp-001
│   ├── 声明式 UI 与 JSX             kp-002
│   ├── 组件与组件树                  kp-003
│   ├── Props 与单向数据流            kp-004
│   ├── State 与 useState            kp-005
│   ├── 事件处理                      kp-006
│   └── 条件渲染与列表渲染            kp-007
├── 02 核心（理解运行时）
│   ├── 渲染与协调                    kp-008
│   ├── Key 与列表复用                kp-009
│   ├── useEffect 与副作用            kp-010
│   ├── 受控与非受控组件              kp-011
│   ├── Context 与跨层级通信          kp-012
│   ├── 组合模式与 Children           kp-013
│   └── Hooks 规则与闭包陷阱          kp-014
├── 03 进阶（工程能力）
│   ├── 自定义 Hook                   kp-015
│   ├── useReducer 与复杂状态         kp-016
│   ├── useRef 与命令式逃生舱         kp-017
│   ├── 记忆化                        kp-018
│   ├── 重渲染机制与性能优化          kp-019
│   ├── Suspense 与 Error Boundary    kp-020
│   └── 状态管理与数据获取            kp-021
└── 04 前沿与实践（面向未来）
    ├── 并发渲染与调度                kp-022
    ├── useTransition / useDeferredValue  kp-023
    ├── React Server Components       kp-024
    ├── React 19 新特性与 Actions     kp-025
    ├── 元框架与 Next.js              kp-026
    ├── 测试策略                      kp-027
    └── 反模式与代码审查清单          kp-028

直观类比

React 像一位自动化调音师：你不需要告诉它「把第 3 号推子从 -6dB 推到 -3dB」（命令式），只需要告诉他「目标混音是这个状态」（声明式，即 UI = f(state)），调音师自己算出差异并平滑执行。React 的全部工程复杂度——虚拟 DOM、协调、并发调度——本质都在回答一个问题：当目标状态变了，怎样以最小代价、最快响应地到达新目标？

历史脉络（速览）

2011：Facebook 内部（Jordan Walke）的 FaxJS 实验 → 2013 JSConf 开源 React。
2013–2016：JSX 与虚拟 DOM 引发争议后成为范式；Flux/Redux 确立单向数据流。
2019：Hooks（16.8）取代类组件，函数组件成为绝对主流。
2022：并发特性（Suspense、useTransition）随 React 18 稳定；Fiber 架构全面兑现。
2024–2026：React 19 稳定——Server Components、Actions、use()、Compiler；「客户端库」与「服务端渲染框架」的边界被重新定义。
（细节以官方 Blog 与 changelog 为准；以上为基于模型知识的时间线，建议核对。）