WHY IT MATTERS
先用一句白话理解
不同状态像不同物品：随手纸条放口袋，团队制度放共享文档，银行余额要去银行查询；把它们全塞进一个抽屉，只会越来越乱。
LEARNING OUTCOMES
学完你能做到什么
为状态选择唯一可信来源和合理生命周期
判断何时只需 React/Vue 内置状态，何时需要全局 Store
使用 Redux Toolkit 或 Pinia 组织跨页面客户端状态
使用 TanStack Query 管理缓存、失效、分页和乐观更新
处理请求竞态、实时更新、离线恢复与失败回滚
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
状态分类
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
派生状态与 URL 状态
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
React Reducer/Context
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Redux Toolkit
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Pinia
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
TanStack Query
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
缓存新鲜度与失效
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
分页与乐观更新
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
实时与离线状态
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
为 Issue Tracker 画出状态归属和生命周期表
用 Redux Toolkit 或 Pinia 管理筛选偏好与草稿
用服务端数据工具完成列表缓存和分页
实现乐观创建、失败回滚与实时事件去重
HANDS-ON PROJECT
动手任务
构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。
交付清单
- ✓状态分类与唯一数据源表
- ✓Store 与服务端缓存实现
- ✓竞态、回滚和离线场景测试记录
MINIMUM RUNNABLE CODE
Redux Toolkit 的最小可运行 Store
import { configureStore, createSlice } from "@reduxjs/toolkit";
const counter = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment(state) {
state.value += 1;
},
},
});
const store = configureStore({ reducer: counter.reducer });
store.dispatch(counter.actions.increment());
console.log(store.getState()); // { value: 1 }先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 为 Issue Tracker 画出状态归属和生命周期表
- 用 Redux Toolkit 或 Pinia 管理筛选偏好与草稿
- 用服务端数据工具完成列表缓存和分页
- 实现乐观创建、失败回滚与实时事件去重
改变约束，验证你真的理解
- 不看教程，独立完成：为状态选择唯一可信来源和合理生命周期
- 不看教程，独立完成：判断何时只需 React/Vue 内置状态，何时需要全局 Store
- 不看教程，独立完成：使用 Redux Toolkit 或 Pinia 组织跨页面客户端状态
- 不看教程，独立完成：使用 TanStack Query 管理缓存、失效、分页和乐观更新
- 不看教程，独立完成：处理请求竞态、实时更新、离线恢复与失败回滚
把实验变成能交付的工程
- 状态分类与唯一数据源表
- Store 与服务端缓存实现
- 竞态、回滚和离线场景测试记录
- 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
把服务端缓存复制进全局 Store 后双向同步
把能计算出的值再次保存为 State
每个页面创建一份相同请求，忽略缓存键设计
乐观更新只考虑成功路径，没有保存回滚快照
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
把状态分成局部、派生、URL、表单、全局客户端和服务端数据，再决定使用框架内置能力、Redux Toolkit、Pinia 或 TanStack Query。
Q02如果只能保留三个验收结果，应该保留什么？＋
状态分类与唯一数据源表；Store 与服务端缓存实现；竞态、回滚和离线场景测试记录
Q03学习过程中最需要主动避免什么？＋
把服务端缓存复制进全局 Store 后双向同步；把能计算出的值再次保存为 State；每个页面创建一份相同请求，忽略缓存键设计；乐观更新只考虑成功路径，没有保存回滚快照
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“构建支持筛选、分页、乐观创建、实时同步和离线草稿的 Issue Tracker。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：为状态选择唯一可信来源和合理生命周期
- □核心机制已用最小实验验证：为 Issue Tracker 画出状态归属和生命周期表
- □风险已检查：把服务端缓存复制进全局 Store 后双向同步
- □风险已检查：把能计算出的值再次保存为 State
- □风险已检查：每个页面创建一份相同请求，忽略缓存键设计
- □风险已检查：乐观更新只考虑成功路径，没有保存回滚快照
- □交付物可复现：状态分类与唯一数据源表
- □交付物可复现：Store 与服务端缓存实现
- □交付物可复现：竞态、回滚和离线场景测试记录
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。