状态

State

中级通用

状态（State）是网页或应用在某一时刻需要记住的数据，比如当前打开的标签页、输入框里的内容。它让界面能随着用户操作或请求结果变化，而不是每次都显示同一套内容。

你可能会说：「我想让页面记住用户刚才选了什么，点完按钮后界面也跟着变。」

读之前建议先了解

动手看看文章编辑器的标签状态

编辑文章

内容编辑

发布设置

文章标题

春季活动海报

预览标题：春季活动海报

当前标签

标题内容

用下方「当前标签」模拟切换页面，用「标题内容」模拟键入文字；还可以悬停标题框，或用 Tab 键聚焦它，观察即时反馈。

高亮的标签说明现在看到的是内容编辑。标题内容一变，输入框和预览会同步变化：它们读的是同一份状态。

1
状态记录当前需要记住的值
做一个商品筛选页时，你得知道用户选了哪个价格区间、是否只看有货商品。这些当前值就是状态；页面根据它们决定显示哪些商品、哪些选项亮起。
2
操作改变状态，界面随之变化
用户点开侧边栏，程序把“是否展开”从否改成是，界面才显示侧边栏。我们先说清楚哪个值会变、变化后显示什么，比只说“点一下要有反应”更容易让 AI 写对。
3
想好谁来保存以及保存多久
弹窗开没开，可以由当前页面的组件暂时记住；刷新后还要保留的草稿，就得存到浏览器或后端。因为普通页面状态通常会在刷新后重建，所以“关闭页面再回来还在”需要单独设计。

状态是当前的值，事件是促使它变化的事情：点击“展开”是事件，“侧边栏已展开”是状态。状态也不等于数据库记录；前端可以暂时记住一份数据来显示，但订单是否真的保存成功，要以后端确认的结果为准。

你在做一个后台筛选页：用户勾选“只看待处理”后，列表立即缩小；刷新页面后不要求保留勾选。你会怎样向 AI 说明？

请为后台列表加入“只看待处理”筛选。用页面状态记录复选框是否勾选，状态变化时更新列表和勾选显示；刷新后无需保留。请说明状态放在哪里，以及列表没有匹配结果时显示什么。