React 组件与数据流
把笔记界面拆为列表、搜索和编辑器，标明每个状态的拥有者和数据流方向。
课程全目录 · 选择章节
本课学习目标
- • 理解 — 组件把界面拆成可复用的职责，props 传递输入，state 保存随交互变化的数据。渲染应该根据当前状态计算结果，避免同时保存可以推导出的重复状态。列表使用稳定 ID 作为 key，不使用随位置变化的序号。
- • 应用 — 笔记列表保存 notes 与 query，通过过滤计算 visibleNotes。若另外保存 visibleNotes，就需要维护两份数据同步，删除或搜索时更容易出现不一致。
- • 验证 — 把笔记界面拆为列表、搜索和编辑器，标明每个状态的拥有者和数据流方向。
完成路径
阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查，不会假装成自动代码评分。
01 / 核心概念
组件把界面拆成可复用的职责，props 传递输入，state 保存随交互变化的数据。渲染应该根据当前状态计算结果，避免同时保存可以推导出的重复状态。列表使用稳定 ID 作为 key，不使用随位置变化的序号。
笔记列表保存 notes 与 query，通过过滤计算 visibleNotes。若另外保存 visibleNotes，就需要维护两份数据同步，删除或搜索时更容易出现不一致。
不要通过 Effect 同步所有可计算数据。优先在渲染时推导，只有与外部系统同步时才考虑 Effect 并正确清理。
02 / 心智模型
理解
组件把界面拆成可复用的职责，props 传递输入，state 保存随交互变化的数据。渲染应该根据当前状态计算结果，避免同时保存可以推导出的重复状态。列表使用稳定 ID 作为 key，不使用随位置变化的序号。
应用
笔记列表保存 notes 与 query，通过过滤计算 visibleNotes。若另外保存 visibleNotes，就需要维护两份数据同步，删除或搜索时更容易出现不一致。
验证
把笔记界面拆为列表、搜索和编辑器，标明每个状态的拥有者和数据流方向。
03 / 代码骨架
const visibleNotes = notes.filter(note => note.title.includes(query));
return visibleNotes.map(note => <NoteCard key={note.id} note={note} />);这是解释结构的代码骨架，外部函数与数据需要在实际项目中实现。
04 / 贯穿案例
放进真实情境里看
笔记列表保存 notes 与 query，通过过滤计算 visibleNotes。若另外保存 visibleNotes，就需要维护两份数据同步，删除或搜索时更容易出现不一致。
- 01
分析边界
组件把界面拆成可复用的职责，props 传递输入，state 保存随交互变化的数据。渲染应该根据当前状态计算结果，避免同时保存可以推导出的重复状态。列表使用稳定 ID 作为 key，不使用随位置变化的序号。
- 02
观察具体过程
笔记列表保存 notes 与 query，通过过滤计算 visibleNotes。若另外保存 visibleNotes，就需要维护两份数据同步，删除或搜索时更容易出现不一致。
- 03
验证失败路径
不要通过 Effect 同步所有可计算数据。优先在渲染时推导，只有与外部系统同步时才考虑 Effect 并正确清理。
05 / 动手做
用自己的产物检验理解
把笔记界面拆为列表、搜索和编辑器，标明每个状态的拥有者和数据流方向。
完成时检查
- 提交可阅读的实现或流程图，并注明输入和输出。
- 至少覆盖一个成功案例与一个失败案例。
- 解释本课的边界，写出仍未解决的一项限制。
自动保存在当前浏览器，不会同步到账户。
06 / 检查点