课程
共 180 门课程,支持按方向、难度与状态筛选。
- A01
模型与应用的关系
拆解聊天产品的界面、请求、服务端和模型职责,认识模型输出与软件执行结果的区别。
AI 应用入门约 25 分钟 - A02
Token 与上下文
观察输入、历史和输出如何占用上下文,设计长对话裁剪策略,区分总额度与单次容量。
AI 应用核心约 30 分钟 - A03
服务端调用模型
使用受控接口完成一次真实调用,保护密钥,记录所用模型标识与必要的请求配置。
AI 应用核心约 30 分钟 - A04
消息组织与角色
对比不同上下文组织对任务的影响,明确固定要求、用户请求和检索资料的来源边界。
AI 应用核心约 30 分钟 - A05
生成参数与输出限制
结合当前模型实际支持能力比较输出长度与生成参数,避免照搬不受支持的配置。
AI 应用核心约 25 分钟 - A06
最小 AI 应用
完成一个带输入、等待、成功和失败状态的解释工具,并对输出进行人工核验。
AI 应用核心约 30 分钟 - A07
提示词结构
把目标、背景、输入、约束和结果格式写清楚,用同一组样例比较改写前后的行为。
AI 应用核心约 30 分钟 - A08
示例与任务拆解
为复杂请求设计少量代表样例和明确子任务,验证是否减少格式错误与遗漏。
AI 应用核心约 30 分钟 - A09
结构化输出
请求并校验结构化结果,处理格式错误、缺少字段和无效枚举,避免直接信任模型文本。
AI 应用核心约 30 分钟 - A10
流式协议与事件
拆开 AI 聊天的「打字机效果」:从上游 SSE 到浏览器渲染,数据流上有哪些事件类型、顺序约定和失败信号。
AI 应用核心约 30 分钟 - A11
流式聊天界面
实现消息展示、逐步输出和代码块,验证重复提交、快速切换会话和页面刷新。
AI 应用核心约 30 分钟 - A12
中断、重试与恢复
实现真正停止请求和可解释重试,处理断网、上游超时及部分消息保存。
AI 应用进阶约 30 分钟 - A13
会话历史与持久化
保存消息、模型配置和请求关系,控制历史长度,保证同一消息不会被重复写入。
AI 应用核心约 30 分钟 - A14
聊天工作台实战
完成会话管理、流式交互和错误处理,提交真实调用记录与界面行为验证。
AI 应用进阶约 40 分钟 - A15
工具调用的工作过程
区分模型提出调用、服务器校验执行和结果回传,用一个只读工具追踪完整流程。
AI 应用核心约 30 分钟 - A16
工具参数与校验
为课程检索定义参数结构,拒绝无效输入和越权资源,测试缺参及异常返回。
AI 应用核心约 30 分钟 - A17
多轮工具执行
完成受限的多步骤查询,记录每一步输入输出,设置次数上限和取消条件。
AI 应用进阶约 30 分钟 - A18
检索增强的目的
用课程资料问答比较有无检索时的回答差异,把资料选择、生成和引用三件事的职责分开。
AI 应用核心约 30 分钟 - A19
文档解析与切分
解析文本与 Markdown,按标题和窗口切分出带标题与来源的片段,观察不同切分长度对检索的影响。
AI 应用核心约 30 分钟 - A20
嵌入与向量检索
理解嵌入把文本变成向量、相似问题向量相近的原理;明确本站默认未启用向量检索,但统一检索接口下可以接入。
AI 应用核心约 30 分钟 - A21
关键词与混合检索
在本站真实的 FTS5 + LIKE 实现上比较关键词、向量与组合检索,分析技术标识符和自然语言问题各自的命中表现。
AI 应用核心约 30 分钟 - A22
引用与答案依据
把回答关联到可打开的片段,核对引用是否真正支持对应结论,资料不足时明确说明而不是编造。
AI 应用核心约 30 分钟 - A23
查询改写与重排
对复杂问题尝试查询改写和候选重排,用固定问题集比较改进效果,记录每次新增的模型调用成本。
AI 应用进阶约 30 分钟 - A24
知识库应用实战
走通资料库导入、索引、检索、问答与删除全流程,测试资料集分类与引用有效性。
AI 应用进阶约 35 分钟 - A25
工作流与智能体选择
比较固定步骤工作流和模型自主决策智能体的适用场景,为真实需求选择可解释且受控的方案。
AI 应用核心约 25 分钟 - A26
状态、工具与执行轨迹
为多步任务保存状态与每步工具的输入输出轨迹,失败后从断点恢复,而不是从头重复所有操作。
AI 应用核心约 30 分钟 - A27
重试与幂等
为可恢复步骤设计请求标识与重试规则,验证相同任务不会重复写入或发送。
AI 应用进阶约 30 分钟 - A28
检索内容与指令边界
构造含误导指令的资料验证应用仍按既定权限处理,确立「检索片段是资料不是指令」的边界与代码层防护。
AI 应用进阶约 30 分钟 - A29
人工确认与写入操作
为修改代码或保存内容设计可查看的建议与确认动作,区分模型生成的建议和实际应用的结果。
AI 应用进阶约 30 分钟 - A30
项目助手工作流
综合前面的机制完成读取需求、检查代码、提出修改与复盘的受控流程,保留清晰证据与停止条件。
AI 应用进阶约 35 分钟 - A31
小型评估集
建立覆盖正常、边界、失败三类问题的小型评估集,记录期望行为而不是参考措辞。
AI 应用核心约 25 分钟 - A32
检索与回答评估
分别评估检索命中、引用有效和答案一致性三层,定位失败环节,避免只给一个总分。
AI 应用进阶约 30 分钟 - A33
提示与版本回归
修改提示或模型配置后运行固定样例比较变化,保留版本记录与已知退步场景,让每次改动可追溯。
AI 应用进阶约 30 分钟 - A34
延迟、用量与费用
记录每次调用的首字延迟、总耗时与输入输出 token,理解缓存和长上下文对账单的影响,用测量结果选优化点。
AI 应用核心约 30 分钟 - A35
调用限制与任务调度
处理本机并发与上游限流:并发上限、退避重试、取消传播与明确错误,避免重复任务和无限重试。
AI 应用进阶约 30 分钟 - A36
AI 功能上线检查
把秘密、配置、权限、失败、日志、评估写成可执行的上线检查清单,逐项验证并留档。
AI 应用进阶约 30 分钟 - A37
图像输入与多模态边界
按 OpenAI 兼容接口的通用形态接入图片理解,以提供方文档为准核对大小、类型、授权与失败表现。
AI 应用核心约 25 分钟 - A38
模型适配与迁移
用统一业务接口隔离提供方,切换时按消息、工具、流式、参数四张核对单迁移并回归验证。
AI 应用进阶约 30 分钟 - A39
AI 导师综合实现
把课程上下文、选中代码、站内检索、引用与笔记保存接成完整的 AI 导师交互,讲清每段数据的去向。
AI 应用进阶约 35 分钟 - A40
AI 项目复盘与改进
用用量数据与评估记录复盘聊天和知识库项目,把改进写成问题、依据、验证三件套。
AI 应用进阶约 35 分钟 - E01
代码规范与检查链
配置类型检查与静态检查链,区分自动修复与语义问题,让检查命令在干净环境可复现。
工程化核心约 30 分钟 - E02
测试层次与业务风险
为学习平台按风险分配单元、接口与浏览器测试,说清每层验证什么、不能证明什么。
工程化核心约 30 分钟 - E03
核心路径自动化
用 Playwright 自动跑通搜索、阅读、答题、笔记等核心路径,用稳定定位与独立测试数据。
工程化进阶约 35 分钟 - E04
性能测量与优化
为代表页面测出加载与交互基线,定位真实瓶颈,单点优化后验证业务结果不变。
工程化进阶约 30 分钟 - E05
本机代码与秘密边界
检查内容渲染、代码预览、实验执行与模型秘密四条边界,避免实验影响本机学习数据。
工程化进阶约 30 分钟 - E06
日志、指标与排错
用错误类别、关联标识与聚合指标串起一条真实失败路径,完成从症状到原因的诊断。
工程化进阶约 30 分钟 - E07
构建、迁移与部署
在干净环境完成安装、迁移、种子、构建、启动五步,核对环境差异与可选依赖。
工程化进阶约 35 分钟 - E08
交付与维护
写可信的 README、架构说明与验收报告,建立内容更新与回归流程,完成毕业交付。
工程化进阶约 30 分钟 - F01
网页与浏览器工作过程
跟踪一次页面请求:从输入网址、服务器响应到浏览器渲染,建立对网页工作过程的整体认识,并学会用开发者工具定位资源加载失败。
前端基础入门约 20 分钟 - F02
语义化 HTML 与表单
用标题结构、语义标签和带原生校验的表单搭一张学习计划表,并用纯键盘走完提交流程、用 FormData 取回输入数据。
前端基础入门约 25 分钟 - F03
CSS 盒模型与布局
组合盒模型、Flex 和 Grid 实现一个课程页面,能算清尺寸、说对对齐关系,并解释内容溢出的原因与修法。
前端基础核心约 30 分钟 - F04
响应式与可访问交互
为导航和阅读布局设置合理断点,验证手机宽度、键盘焦点显示、图标可访问名称与内部横向滚动。
前端基础核心约 25 分钟 - F05
JavaScript 值与类型
用表单里的真实输入分清数字、字符串、空值和引用类型,解释隐式转换如何导致表单计算与条件判断出错。
前端基础核心约 25 分钟 - F06
函数、作用域与闭包
实现计数与防抖工具,通过多个调用场景观察变量捕获,解释「回调使用旧值」的形成条件。
前端基础核心约 30 分钟 - F07
数组、对象与不可变更新
对课程清单执行筛选、分组和更新,确认原始数据未被意外修改,理解浅拷贝的能力边界。
前端基础核心约 30 分钟 - F08
模块、包与依赖管理
把功能拆成可复用模块,读懂 package.json 脚本与依赖锁文件,并在干净目录重现一次安装与启动。
前端基础核心约 25 分钟 - F09
异步、Promise 与事件循环
通过受控的时间例子解释异步执行顺序,实现串行与并行任务,并处理失败与提前结束。
前端基础核心约 35 分钟 - F10
HTTP、Fetch 与取消请求
请求分页接口并处理非成功状态、无效响应和取消,在浏览器网络面板对照请求头、状态码与取消效果。
前端基础核心约 30 分钟 - F11
TypeScript 基本类型
为课程、学习记录和表单定义类型,修复可空值及联合类型问题,不用 any 掩盖错误。
前端基础核心约 30 分钟 - F12
泛型与类型收窄
实现类型安全的分页结果和状态联合,通过分支收窄减少断言,并理解编译检查与运行校验的区别。
前端基础进阶约 30 分钟 - F13
浏览器存储与序列化
用 localStorage 保存主题和临时草稿,处理无效数据、版本升级与存储失败,分清缓存与可靠个人备份。
前端基础核心约 25 分钟 - F14
Git 与开发协作
完成分支、提交、差异检查和冲突解决,写出说明具体行为变化的提交信息,并用 stash 保护未提交的工作。
前端基础核心约 35 分钟 - F15
调试与错误定位
使用断点、调用栈、网络记录和最小复现排查问题,提交包含输入、结果和环境的缺陷描述。
前端基础核心约 30 分钟 - F16
前端基础综合练习
从空目录完成一个可筛选的学习资源页,综合检验语义结构、响应式、请求状态、类型定义和本地偏好保存。
前端基础进阶约 45 分钟 - G01
工具链与模块
从空目录建立第一个 Go 模块:go.mod、包组织与入口约定,跑通 run/build/fmt/vet/test 的日常开发循环。
Go入门约 25 分钟 - G02
类型与数据结构
用结构体、切片和映射表达书签数据,理解零值语义与切片共享底层数组的坑,并亲手修复一次误用。
Go核心约 25 分钟 - G03
函数、方法与接口
把书签存取抽成 Store 接口并实现内存版,理解接口定义在使用方一侧、指针接收者与隐式满足。
Go核心约 25 分钟 - G04
错误与资源清理
用哨兵错误与 %w 包装携带上下文,errors.Is/As 做可靠判断,defer 保证文件等资源在出错路径也被释放。
Go核心约 25 分钟 - G05
HTTP 服务与路由
用标准库 net/http 写出健康检查、书签列表和详情接口:方法+路径路由、路径参数、状态码与响应头。
Go核心约 30 分钟 - G06
JSON 与输入校验
守住写入接口的入口:解码请求体、逐字段校验、限制大小、拒绝未知字段,错误响应统一形状。
Go核心约 25 分钟 - G07
中间件与请求上下文
用中间件统一请求 ID 与访问日志,理解包装顺序与执行顺序的关系,学会 context 传请求级元数据的边界。
Go核心约 30 分钟 - G08
数据库与事务
用 database/sql 把书签搬进 SQLite:建表、事务写入、唯一约束转译、连接与结果集生命周期。
Go核心约 35 分钟 - G09
goroutine 与生命周期
启动能被停止的后台任务:goroutine 配对 WaitGroup,用 context 作为唯一停止通道,退出前确认无残留。
Go进阶约 30 分钟 - G10
channel 与任务协调
用 channel 搭建多 worker 的 URL 校验流水线,划清发送、接收、关闭责任,识别阻塞与泄漏。
Go进阶约 30 分钟 - G11
数据竞争与同步
制造并修复共享数据竞争:-race 检测器抓现场,mutex 保护复合状态,atomic 处理单变量计数。
Go进阶约 30 分钟 - G12
context、超时与取消
让取消信号贯穿请求、数据库与慢调用:从 http.Request.Context() 派生超时层层传递,客户端断开后服务端及时止损。
Go进阶约 30 分钟 - G13
表驱动与接口测试
表驱动测试覆盖校验函数的成功/边界/错误输入,httptest 打真实路由断言状态码与响应体。
Go核心约 30 分钟 - G14
日志、健康与优雅退出
slog 结构化日志、healthz 真探数据库、Ctrl+C 优雅退出:停收新请求、等在途、停后台、关资源。
Go进阶约 30 分钟 - G15
书签检索服务实战
组装完整书签检索服务:管理、标签、关键词查询与分页,接上前端示例,交付可复现的启动与检查命令。
Go进阶约 40 分钟 - G16
Go 服务复盘
以证据为准的可靠性复盘:五个维度的取证命令审出问题,按影响修复一个并留下前后对比与遗留清单。
Go进阶约 30 分钟 - N01
项目初始化与约定
用 create-next-app 建一个可复现的工程:读懂目录、配置、脚本和锁文件,并验证 next dev 与 next build + next start 的区别。
Next.js入门约 25 分钟 - N02
App Router 与页面
在 App Router 里建课程列表和详情路由:目录即 URL,配好 not-found 页面,用 Link 实现有效导航。
Next.js核心约 25 分钟 - N03
布局、嵌套与导航
建公共导航和学习区嵌套布局:页面切换时布局保留不重载,激活态用 usePathname 实现,子路由错误不会波及布局。
Next.js核心约 25 分钟 - N04
动态参数与搜索参数
用 params 读取课程标识,用 searchParams 表达筛选和分页:App Router 里它们是 Promise,await 之后状态写进 URL,刷新和分享都能恢复。
Next.js核心约 25 分钟 - N05
服务端与客户端组件
按「要不要数据和要不要交互」划边界:数据与秘密留在服务端组件,交互下沉到 use client 客户端组件,客户端依赖越少包越小。
Next.js核心约 25 分钟 - N06
路由基础综合实践
把 N01-N05 拼成完整的课程浏览流程:面包屑、目录、加载态、错误兜底、无效参数处理和返回导航一个不漏。
Next.js核心约 30 分钟 - N07
服务端数据访问
在 App Router 的服务端组件里直接读本地 SQLite:什么时候能读、秘密放在哪、为什么浏览器构建里不能出现数据库代码。
Next.js核心约 25 分钟 - N08
数据缓存与失效
按 Next.js 当前规则缓存课程数据:revalidatePath / revalidateTag 精准失效,改完内容和进度立刻看到新数据,笔记界面不再躺在旧记录上。
Next.js核心约 30 分钟 - N09
流式渲染与加载边界
把慢内容从整页渲染里拆出来:loading.tsx 与 Suspense 分级流式送达,局部失败不再拖垮整页。
Next.js核心约 25 分钟 - N10
Route Handlers
用 Route Handler 写出带分页、输入校验和稳定错误结构的 JSON 接口,并用真实请求验证每个分支。
Next.js核心约 30 分钟 - N11
表单写入与服务端动作
用 Server Action 把表单提交直连服务端:一份校验、错误回显、防重复提交,保存进 SQLite。
Next.js核心约 30 分钟 - N12
数据访问综合实践
把读取、保存、缓存失效、撤销串成一条可靠的编辑流程,刷新之后每个入口看到的数据都一致。
Next.js核心约 35 分钟 - N13
本地持久化与备份
给数据安家:SQLite 固定在 data/ 目录,导出、合并恢复与格式版本迁移三件套,删库验证记录不丢。
Next.js核心约 30 分钟 - N14
多窗口编辑与冲突
两个窗口同时改一篇笔记:用 revision 乐观锁检测冲突,保留副本、人工合并,杜绝静默覆盖。
Next.js核心约 30 分钟 - N15
数据库与迁移
从空库开始设计课程、进度、笔记与草稿表,用编号迁移文件管理结构变更,唯一约束压到数据库层。
Next.js核心约 30 分钟 - N16
MDX 与内容系统
课程正文离开组件变成 MDX 文件:frontmatter 校验、目录生成、死链检查,坏内容可见地失败。
Next.js核心约 30 分钟 - N17
文件导入与资源访问
资料导入走受控通道:检查大小类型、入库建索引、按资源 ID 取回,堵死任意本机路径读取。
Next.js核心约 30 分钟 - N18
搜索与分页
关键词、排序、页码全部进 URL:搜索结果可分享、可后退、翻页不丢状态,空态有明确回应。
Next.js核心约 30 分钟 - N19
页面元数据与索引
给课程和项目页配上准确的标题、描述与 canonical 链接,无效页面诚实 404,理清元数据与索引。
Next.js核心约 25 分钟 - N20
图片、字体与加载性能
图片交给 next/image、字体交给 next/font,用 LCP/CLS 实测代表页面,只修有数据支撑的问题。
Next.js核心约 30 分钟 - N21
测试与故障排查
dev 与 build 的差异是事故之源:冒烟测试、写入恢复回环与故障证据存档,让修复可复现可传承。
Next.js核心约 30 分钟 - N22
部署与运行配置
环境变量、构建、迁移、启动、日志整理成运行手册,以干净环境从零重现作为唯一验收标准。
Next.js核心约 30 分钟 - N23
个人知识站完整实战
出厂验收:浏览、编辑、归档、导出四条旅程走查,数据库、缓存、元数据与移动端全面体检。
Next.js进阶约 45 分钟 - N24
全栈应用架构复盘
复盘单人全栈应用的五层边界:渲染、交互、写入、持久、模型服务各管什么、不管什么、为什么。
Next.js进阶约 30 分钟 - P01
Python 环境与项目
创建隔离环境和可重现依赖,运行入口程序,区分解释器、环境与包安装位置。
Python入门约 20 分钟 - P02
值、容器与控制流程
处理学习记录列表,使用条件与循环完成清洗和统计,明确空值及可变数据行为。
Python入门约 25 分钟 - P03
函数与模块
把解析、校验和统计拆成可测试函数,通过模块组织职责,避免导入时执行不必要操作。
Python核心约 25 分钟 - P04
异常与资源管理
处理文件和网络异常,使用资源管理方式确保关闭,保留有用错误信息并避免吞掉异常。
Python核心约 25 分钟 - P05
类型标注与数据模型
为请求和业务对象添加类型与运行校验,理解类型提示不能代替外部输入验证。
Python核心约 25 分钟 - P06
文件、JSON 与实用脚本
编写课程索引校验工具,处理编码、路径与无效文件,输出能够定位问题的报告。
Python核心约 25 分钟 - P07
FastAPI 基础接口
用 FastAPI 写出第一个课程查询接口:路由、路径参数、查询参数、状态码和响应结构,并用真实请求验证行为。
Python核心约 25 分钟 - P08
请求与响应校验
为新增笔记定义输入和输出模型,处理缺少字段、长度超限及无效枚举的情况。
Python核心约 25 分钟 - P09
依赖与配置管理
注入数据库和配置依赖,区分启动必需参数与可选能力,避免在模块导入时连接所有服务。
Python核心约 25 分钟 - P10
同步、异步与取消
比较网络等待和计算任务,正确组织异步调用,处理超时并避免阻塞事件循环。
Python进阶约 30 分钟 - P11
数据库与持久化
建立课程、笔记和学习记录关系,完成 SQLite 迁移、读写、唯一约束和基本事务验证。
Python核心约 30 分钟 - P12
本机服务与前端协作
对接个人前端,核对地址、端口、跨域和数据契约,处理服务不可达与重复调用。
Python核心约 25 分钟 - P13
分页、检索与错误结构
设计稳定分页与筛选参数,限制请求规模,返回可被前端正确处理的统一错误。
Python核心约 25 分钟 - P14
上传与后台任务
接收受限文档,建立解析任务状态,检查大小、类型、失败重试和文件清理。
Python进阶约 30 分钟 - P15
调用模型与流式代理
使用服务端凭据连接模型,转发增量结果,处理上游失败、取消和部分响应。
Python进阶约 30 分钟 - P16
文档处理与检索接口
实现解析、切分和查询接口,保留来源与版本,验证空资料和无结果场景。
Python进阶约 30 分钟 - P17
接口与逻辑测试
覆盖成功、输入错误、重复写入和外部服务失败,使用临时数据并保护本人学习记录。
Python核心约 30 分钟 - P18
日志、容器与部署
配置启动、健康状态、日志和环境变量,验证服务重启后持久数据仍然存在。
Python进阶约 30 分钟 - P19
学习记录 API 实战
完成记录、笔记和统计服务,对接前端并运行契约测试,提交启动与故障说明。
Python进阶约 30 分钟 - P20
Python 服务复盘
审查模块边界、数据模型、异步使用、异常和测试,修复一个具有实际影响的问题。
Python进阶约 25 分钟 - R01
React 与组件思维
把学习工作台拆成职责明确的组件,建立「输入 → 展示 → 交互」的组件心智模型。
React入门约 25 分钟 - R02
JSX 与表达式
掌握 JSX 的三句话规则:属性是 JS、花括号只放表达式、相邻元素要父级,写出带条件与列表的课程摘要。
React入门约 25 分钟 - R03
Props 与数据传递
用解构与默认值设计组件输入,区分必需和可选 props,守住「props 只读、数据单向流动」的约定。
React核心约 25 分钟 - R04
组件组合与 children
用 children 把内容当参数传给容器组件,识别「开关属性爆炸」的信号,学会用组合替代枚举。
React核心约 25 分钟 - R05
条件渲染与状态分支
用互斥的 status 字段实现加载、失败、空白、成功四态界面,替代互相矛盾的多布尔组合。
React核心约 25 分钟 - R06
列表渲染与稳定标识
用可重排任务列表复现下标 key 导致的输入错位,理解 React 按 key 配对复用的机制,选出真正稳定的业务标识。
React核心约 25 分钟 - R07
事件处理与传播
理解 React 事件的绑定、冒泡与表单提交时机,用 stopPropagation 拆掉「一次点击触发多项操作」的连锁反应。
React核心约 25 分钟 - R08
useState 与状态快照
理解 setState 之后的渲染快照模型:为什么连续两次 count++ 只加一次,函数式更新如何修复它。
React核心约 25 分钟 - R09
渲染、提交与更新
把一次更新拆成触发、执行渲染、提交三阶段,解释父更新为何带动子组件函数重执行,并用工具验证判断。
React核心约 25 分钟 - R10
第一个交互应用
综合前九课完成课程收藏列表:新增、删除、筛选、localStorage 状态恢复,覆盖空输入、重复、空列表等边界。
React核心约 30 分钟 - R11
选择状态的最小集合
逐个追问「能不能算出来」,删掉重复与可推导的状态,用渲染时派生计算生成完成数量和筛选结果。
React核心约 25 分钟 - R12
对象状态与嵌套更新
用「章节 + 课时」的嵌套编辑数据练不可变更新:浅复制的边界、层层新建的写法、直接修改为何让 React 失明。
React核心约 30 分钟 - R13
数组状态与集合操作
配齐数组增删改排序的不可变写法,给出变异方法禁用清单,用数据快照核对每次操作后的身份与一致性。
React核心约 30 分钟 - R14
状态提升与共享
把筛选控件与列表的共同状态提升到最近公共父组件,子组件受控化,实现「一处改、处处同步」。
React核心约 25 分钟 - R15
受控与非受控输入
同表单双实现对照:受控输入实时可读可重置,非受控提交时才读、用 defaultValue 和换 key 重挂载重置。
React核心约 25 分钟 - R16
表单校验与提交
用互斥状态建模异步提交全流程:字段级校验、重复点击防护、服务端失败保数据、成功反馈与回落。
React核心约 30 分钟 - R17
派生状态与重复来源
筛选结果、统计数字这类「算出来的值」不该再存成 state:在渲染期直接计算,一次更新后所有展示天然一致。
React核心约 25 分钟 - R18
useReducer 与状态转移
把多步骤练习提交的状态逻辑收进一个 reducer:动作表达业务变化,转移规则集中可测,非法操作直接忽略。
React核心约 25 分钟 - R19
Context 与依赖范围
用 Context 传主题和学习偏好:理解 Provider 的作用范围、context 与属性传递的分工,别把什么都塞进全局。
React核心约 25 分钟 - R20
Reducer 与 Context 组合
把 reducer 和 Context 拼成一个课程编辑工作区:读写分离的两个 context,多个子组件共享同一份状态。
React核心约 25 分钟 - R21
组件身份与状态保留
React 按位置和类型决定组件「是不是同一个」:条件切换与 key 如何影响状态保留与重置,以及切换课时后编辑内容混用怎么修。
React核心约 25 分钟 - R22
复杂状态综合实践
做一个带详情面板的任务看板:状态组合(列表 + 选中项 + 草稿)、取消编辑、删除选中项后的兜底处理一次到位。
React核心约 30 分钟 - R23
副作用的适用场景
三类代码各回各家:用户事件里响应动作、渲染期做纯计算、Effect 只留给与外部系统的同步——把放错位置的副作用挪回去。
React核心约 25 分钟 - R24
useEffect 与依赖
连接一个外部定时订阅:写完整依赖数组、依赖变化时重建连接,并亲眼看看漏依赖怎么造出「永远是旧值」的闭包。
React核心约 25 分钟 - R25
副作用清理与生命周期
建立连接就要负责断开:在 Effect 里实现事件监听的注册与清理,验证面板切换和组件卸载后不留重复监听和泄漏资源。
React核心约 25 分钟 - R26
请求竞态与取消
快速切换时慢的旧请求会晚到并覆盖新页面;用清理函数的结果归属和 AbortController 保证界面只认最后一次请求。
React核心约 25 分钟 - R27
useRef 与可变引用
用 useRef 保存不参与渲染的计时器与实例信息,分清「改引用不触发渲染」和「改状态才触发渲染」的分工。
React核心约 25 分钟 - R28
DOM 操作与焦点管理
用 ref 接管对话框打开时的自动聚焦、Esc 关闭和关闭后的焦点归还,并验证滚动定位与键盘操作闭环。
React核心约 25 分钟 - R29
自定义 Hook 的边界
把订阅和表单逻辑抽成职责单一的自定义 Hook,定义清楚输入输出与清理职责,避免一个巨型 Hook 塞下整个页面。
React核心约 25 分钟 - R30
依赖陷阱与旧闭包
通过定时器、订阅和异步回调复现旧闭包问题,用函数式更新、正确依赖和 ref 持有最新值三种手段修复。
React进阶约 25 分钟 - R31
同步外部数据源
用 useSyncExternalStore 订阅模块级 store 或浏览器事件,理解快照稳定性要求,验证多组件读取时不会出现不一致。
React进阶约 25 分钟 - R32
副作用与引用综合实验
综合验收:可暂停番茄钟加课程切换详情页,按竞态、旧闭包、卸载清理三条线验证副作用与引用的正确姿势。
React进阶约 30 分钟 - R33
Hook 规则与逻辑组织
修复条件调用和循环调用 Hook 导致的崩溃,理解稳定调用顺序的记账原理,用自定义 Hook 与拆分组织复杂组件。
React核心约 25 分钟 - R34
记忆化的实际价值
先测量再缓存:学会判断一次计算是否昂贵,理解 useMemo 的依赖即缓存失效条件与维护成本,避免盲目包装所有值。
React核心约 25 分钟 - R35
memo 与属性稳定性
观察列表里的重复渲染,用 memo 挡住不必要的子组件渲染,并用 useCallback/useMemo 稳定传入的属性引用,验证优化前后行为一致。
React核心约 25 分钟 - R36
延迟更新与交互响应
在昂贵筛选的输入场景中,用 useDeferredValue 与 useTransition 让输入保持即时、结果允许晚一拍,理解并发更新的优先级分工。
React核心约 25 分钟 - R37
Suspense 与加载体验
理解 Suspense 边界「抛出 Promise、就近接管」的机制,按用户等待粒度设计边界位置,用嵌套边界与 startTransition 避免整页反复闪烁。
React核心约 25 分钟 - R38
错误边界与恢复
用错误边界隔离可失败的局部组件并提供恢复动作,区分渲染错误、事件错误与异步请求失败三种处理位置。
React核心约 25 分钟 - R39
Portal 与覆盖层
用 createPortal 把对话框渲染到 body 下的独立节点,避开父级裁剪与层叠上下文,逐项检查层叠、滚动锁定、焦点和关闭行为。
React核心约 25 分钟 - R40
Hook 组合综合实践
实现可搜索的命令面板,组合受控输入、异步检索、键盘导航与清理,并用快速输入与连按方向键验证组合后的正确性。
React进阶约 30 分钟 - R41
服务端数据与界面状态
把页面状态按来源分为远程数据、筛选条件与临时选择三类,各归其位,消除刷新覆盖与重复缓存。
React核心约 25 分钟 - R42
数据请求与缓存策略
实现按键缓存的请求方案:缓存键跟随筛选条件、命中秒开、失败可重试、写入后失效,并验证切换结果始终与参数对应。
React核心约 30 分钟 - R43
写入、乐观更新与回滚
为收藏操作实现即时反馈、服务端确认与失败回滚,处理快速连点与并发响应,用界面态与服务端态对照验证最终一致。
React核心约 30 分钟 - R44
表单与异步校验
构建多字段编辑表单:异步唯一性检查防过期落地、提交状态独立、字段依赖主动重校验。
React核心约 30 分钟 - R45
可复用组件 API
设计受控/非受控双轨、默认行为合理、以组合为扩展点的筛选组件,明确无障碍职责归属,用双场景复用检验设计。
React核心约 30 分钟 - R46
类型安全的组件设计
用字面量联合与可辨识联合表达组件契约,用泛型让回调类型跟随数据,让非法参数组合在编译期暴露。
React核心约 30 分钟 - R47
可访问组件实践
实现键盘可完整操作、角色与状态标注正确的标签页组件,并用「只用键盘」的流程验证交互与焦点。
React核心约 30 分钟 - R48
国际化与长文本适配
界面文字与业务逻辑分离成消息表,日期数字交给 Intl,布局为长文本与窄屏留弹性,清除写死的假设。
React核心约 25 分钟 - R49
组件测试与用户行为
以用户视角为表单、筛选和对话框写行为测试:按角色与标签查询、用真实交互操作、断言可见结果,清理依赖内部实现的脆测试。
React核心约 30 分钟 - R50
异步交互测试
为异步交互写确定性测试:mock 控制响应时机、fake timers 消除真实等待、findBy 等待条件,覆盖请求中、成功、失败、取消与重试。
React核心约 30 分钟 - R51
性能定位与分析
走完「复现 → 记录 → 定位 → 修改 → 再测量」的性能闭环,按瓶颈类型对症修改,用数字而非感觉验证优化。
React进阶约 30 分钟 - R52
大列表与虚拟化
实现最小虚拟列表(撑高、窗口、缓冲),对比分页与虚拟化的适用边界,验证滚动流畅与键盘定位。
React核心约 30 分钟 - R53
多文件应用结构
按功能组织页面、组件、数据访问与测试,保持依赖方向单向清晰,在第三次重复时才抽取公共逻辑。
React核心约 30 分钟 - R54
React 项目调试
从状态、闭包、身份、竞态、副作用五类假设出发排查综合故障:先稳定复现,再逐类收集证据,最后留下问题档案。
React进阶约 30 分钟 - R55
React 看板项目实战
项目实战课:围绕 p1-task-board 任务看板做需求拆解、里程碑规划与关键决策讲解,按验收清单提交可运行结果与设计说明。
React进阶约 45 分钟 - R56
React 管理台项目复盘
完成 p2-data-workbench 数据管理台后,按数据、请求、表单、测试、性能五个维度做代码审查,用四元组写出能说服他人的复盘文档。
React进阶约 45 分钟