区分服务器数据与本地界面状态
将服务器数据（获取、缓存、刷新）与短暂的界面状态（打开的面板、输入内容）分开。保持逻辑清晰、更新可预测。
区分服务器数据与本地界面状态 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 3 节课。
两种状态
目标：不要混淆服务端数据和本地界面状态。
- 服务端数据：获取、缓存、刷新
- 本地界面状态：视图标记、输入、筛选条件
- 分离关注点 → 代码更简单
经验法则
- 如果数据来自应用程序接口并且可以重新获取，就将其视为服务端状态。
- 如果数据仅控制视图，就将其保留在本地。
- 将获取状态（空闲/加载中/错误）放在服务端数据附近。
演示：获取与刷新（服务端状态）
将产品作为服务端数据获取；包含状态、最后更新时间和手动刷新。
<div id="root"></div>演示：本地界面状态（仅视图）
本地界面状态：纯粹与视图有关（打开/关闭、输入文本）。不要发送到服务端。
<div id="root"></div>演示：组合服务端数据与本地筛选
分离获取逻辑，然后应用本地筛选，而不修改服务端缓存。
<div id="root"></div>提示与常见问题
- 将获取逻辑和状态与服务端数据放在一起
- 使用本地状态保存仅与视图有关的标记和输入
- 不要为了调整界面而修改缓存的服务端数据——应通过派生得到结果
状态分类检查
回顾
回顾：将已获取且可刷新的数据视为服务端状态。将视图关注点（切换开关、输入）保留为本地界面状态。通过从缓存派生界面数据来组合两者，而不要修改缓存。
常见问题解答
「区分服务器数据与本地界面状态」课时是免费的吗？
是的 — 「区分服务器数据与本地界面状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 3 节课。
「区分服务器数据与本地界面状态」这节课中我会学到什么？
将服务器数据（获取、缓存、刷新）与短暂的界面状态（打开的面板、输入内容）分开。保持逻辑清晰、更新可预测。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 3 节。
「区分服务器数据与本地界面状态」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 区分服务器数据与本地界面状态
- 规范化与乐观更新（概念）
- 无需大型库的同步模式