React 19.2：从第一个组件到并发交互 · 框架工程

WHY IT MATTERS

先用一句白话理解

React 像电子表格：你描述数据与界面的关系，数据改变后框架重新计算需要变化的格子，而不是让你手工搬动每个 DOM 节点。

LEARNING OUTCOMES

学完你能做到什么

熟练使用 JSX、组件、Props、State、事件与表单

理解 State Snapshot、Render/Commit 和状态不可变更新

能用 Reducer、Context 与自定义 Hook 拆分复杂交互

掌握 Suspense、Transition、Action、乐观更新与 Activity 的适用场景

能渐进启用 React Compiler，并用性能工具定位真实瓶颈

CONCEPT DEEP DIVE

把每个核心概念讲透

不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。

01CORE CONCEPT

JSX 与组件纯函数

先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建一个带搜索、筛选、编辑、乐观更新和离开后状态保留的团队任务看板。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

02CORE CONCEPT

Props、State 与事件

03CORE CONCEPT

状态结构与状态提升

04CORE CONCEPT

Reducer 与 Context

05CORE CONCEPT

Effect 与外部系统同步

06CORE CONCEPT

Suspense 与 Transition

07CORE CONCEPT

Actions 与乐观更新

08CORE CONCEPT

Activity 与 useEffectEvent

09CORE CONCEPT

React Compiler

CONCEPT MAP

这一章的学习步骤

1JSX 与组件纯函数

2Props、State 与事件

3状态结构与状态提升

4Reducer 与 Context

5Effect 与外部系统同步

6Suspense 与 Transition

7Actions 与乐观更新

8Activity 与 useEffectEvent

9React Compiler

STEP 01

完成支持新增、筛选和编辑的任务列表

STEP 02

把混乱的 Effect 重构为派生数据或事件处理

STEP 03

为慢速搜索加入 Transition，并用性能面板验证改善

STEP 04

用乐观更新实现即时反馈和失败回滚

HANDS-ON PROJECT

动手任务

PROJECT BRIEF

构建一个带搜索、筛选、编辑、乐观更新和离开后状态保留的团队任务看板。

交付清单

✓组件职责图和状态归属表
✓不少于三个可复用自定义 Hook
✓一次基于性能分析结果的优化记录

MINIMUM RUNNABLE CODE

React 19.2 Activity 保留隐藏界面的状态

tsx

import { Activity, useState } from "react";

export default function App() {
  const [showGuide, setShowGuide] = useState(false);

  return (
    <main>
      <button onClick={() => setShowGuide((value) => !value)}>
        {showGuide ? "收起" : "打开"}学习笔记
      </button>
      <Activity mode={showGuide ? "visible" : "hidden"}>
        <textarea defaultValue="组件状态会被保留" />
      </Activity>
    </main>
  );
}

先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。

DELIBERATE PRACTICE

三级练习：从复现到生产

每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。

LEVEL 1 · 基础复现

让核心机制第一次跑通

完成支持新增、筛选和编辑的任务列表
把混乱的 Effect 重构为派生数据或事件处理
为慢速搜索加入 Transition，并用性能面板验证改善
用乐观更新实现即时反馈和失败回滚

LEVEL 2 · 独立改造

改变约束，验证你真的理解

不看教程，独立完成：熟练使用 JSX、组件、Props、State、事件与表单
不看教程，独立完成：理解 State Snapshot、Render/Commit 和状态不可变更新
不看教程，独立完成：能用 Reducer、Context 与自定义 Hook 拆分复杂交互
不看教程，独立完成：掌握 Suspense、Transition、Action、乐观更新与 Activity 的适用场景
不看教程，独立完成：能渐进启用 React Compiler，并用性能工具定位真实瓶颈

LEVEL 3 · 生产挑战

把实验变成能交付的工程

组件职责图和状态归属表
不少于三个可复用自定义 Hook
一次基于性能分析结果的优化记录
检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。

COMMON PITFALLS

最容易踩的坑

把所有变量都放进 State，制造重复和不同步的数据

用 Effect 处理本应在渲染或事件里完成的逻辑

没有测量就堆叠 useMemo、useCallback 和 React.memo

把实验 API 与 React 19.2 稳定 API 混为一谈

SELF CHECK

先回答，再展开参考答案

Q01这一课最核心的业务目标是什么？＋

围绕一个任务看板逐步学习 React，不从零散 Hook 清单开始，而是从数据如何变成界面、一次交互如何触发更新开始。

Q02如果只能保留三个验收结果，应该保留什么？＋

组件职责图和状态归属表；不少于三个可复用自定义 Hook；一次基于性能分析结果的优化记录

Q03学习过程中最需要主动避免什么？＋

把所有变量都放进 State，制造重复和不同步的数据；用 Effect 处理本应在渲染或事件里完成的逻辑；没有测量就堆叠 useMemo、useCallback 和 React.memo；把实验 API 与 React 19.2 稳定 API 混为一谈

Q04怎样证明你不是“看懂了”，而是真的会做？＋

独立完成“构建一个带搜索、筛选、编辑、乐观更新和离开后状态保留的团队任务看板。”，并用测试、数据或运行结果逐项验收交付清单。

PRODUCTION READINESS

本课完成检查表

全部能打勾，再进入下一课。

□目标明确：熟练使用 JSX、组件、Props、State、事件与表单
□核心机制已用最小实验验证：完成支持新增、筛选和编辑的任务列表
□风险已检查：把所有变量都放进 State，制造重复和不同步的数据
□风险已检查：用 Effect 处理本应在渲染或事件里完成的逻辑
□风险已检查：没有测量就堆叠 useMemo、useCallback 和 React.memo
□风险已检查：把实验 API 与 React 19.2 稳定 API 混为一谈
□交付物可复现：组件职责图和状态归属表
□交付物可复现：不少于三个可复用自定义 Hook
□交付物可复现：一次基于性能分析结果的优化记录

PRIMARY SOURCES

继续深入的官方资料

React 官方学习指南 React 19.2 官方发布说明 React Compiler 官方指南

课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。