状态
State也常被叫作:界面状态数据状态当前值UI 状态页面状态
「页面现在「记住」的数据:输入框里打了什么、开关是开是关、购物车有几件,页面长什么样全靠它。」
状态 State
界面当前记住的数据集合:输入、开关、选中项、计数,页面按它来显示。
状态就是界面「现在记住的数据」。输入框里打了什么字、开关是开还是关、选中的是哪个标签页、购物车里有几件——这些都是状态。页面上看到的一切,都是状态的显示结果:状态是数据,界面是这堆数据画出来的样子。
状态最大的坑是「数据变了,界面没跟着变」。你打字,状态要更新,界面也要更新,中间断掉任何一环,就会出现「明明输入了,显示却没反应」。所以让 AI 做交互时,说清楚「哪些是状态、什么时候变、变了之后哪些地方要跟着变」,比笼统说「做个表单」有效得多。
还有三个常见现实:刷新页面后状态可能丢掉,除非特意存到本地或服务器;同一个功能开两个窗口时,状态可能各记各的;把「当前状态」和「长期数据」混为一谈——购物车当前 3 件是状态,上个月的订单是数据库。验证状态功能,就用「刷新」和「开两个窗口」这两个动作去试。
长什么样 真实可交互,不是截图
状态:界面记住的当前数据
输入框里的字、开关的值、购物车数量都是状态。页面是状态的镜子:状态变了,镜子里的画面才变。
拆开看,里面有这几块
-
1
状态值 Value
当前记着的数据,可能是文字、数字或开关值。
-
2
更新动作 Setter
改变状态的动作:用户输入、点击、定时刷新。
-
3
显示层 View
把状态画出来的界面部分。状态变了,它必须跟着变。
-
4
数据来源 Source
状态从哪来:用户输入、服务器返回、本地存储。
常见的有哪几种
只属于某一块界面的数据,别处不管。
用在:折叠面板开合、输入框当前文字
多个页面或组件共用的数据,一处改处处见。
用在:登录用户、购物车、全局设置
刷新、关掉浏览器后还在的数据。
用在:草稿、主题、偏好设置
容易搞混?这样区分
什么时候用得上
输入框的字就是状态,提交时把状态发出去。
一个窗口改了设置,另一个窗口要跟着变——这是共享状态要解决的问题。
输入内容作为状态,刷新后还能恢复——这是持久化状态。
你可以这样跟 AI 说
直接复制下面这段,把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了:改哪里、不许动啥、做完交什么。
【范围】只做 [功能:设置页 / 购物车 / 草稿箱] 的数据状态逻辑,不改页面外观 【目标】实现「[用户输入 / 点击开关] 后,[哪些界面区域] 跟着更新」,更新要真实反映数据,不是只改个显示 【边界】 - 说清楚哪些数据算「状态」,刷新后要保留还是清空 - 不要新增我没要求的存储(本地 / 服务器),先告诉我你打算把状态存在哪 - 不要改动页面样式和结构 【交付】 1. 哪些数据是状态、各自存在哪(内存 / 本地存储 / 服务器) 2. 状态更新后,哪些界面区域会跟着变,列出清单 3. 我按哪几步操作能验证:输入 → 看界面变 → 刷新 → 看是否保留 4. 开两个窗口时表现是什么,你验证过没有 5. 哪部分你没验证,明确说
「刷新后要保留还是清空」和「开两个窗口的表现」这两问,把状态最容易翻车的两个场景提前摆上台面——很多「状态已做好」在刷新那一下就现形。
它说「做好了」,你怎么自己验
这是本站的重头戏。AI 最会的不是写代码,是说「已完成」。这一条,它通常最多做到「主路径」这层:真实用户的正常操作能走通,不靠特殊参数。
要亲眼看到这些,才算数
- 亲手操作:输入文字、开关切换、切标签,界面显示跟着变,没有「变了但没显示」。
- 刷新页面:该保留的状态(草稿、主题)还在;该清空的(一次性输入)清空了——两种都验证。
- 需要共享的场景:开两个窗口操作同一功能,确认数据一致或行为符合你的预期。
- 边界动作:清空输入、连续快速点击、断网重试,看状态有没有错乱。
- 让 AI 指出状态存在哪(内存 / 本地 / 服务器),你按它说的位置去核对真实数据。
它常这么糊弄你
- 「状态已同步」——它把数据存了两份,一处变了另一处没变。改一处,看所有相关位置是否一起变。
- 「刷新后不会丢」——没验证就打包票。你亲自刷新一次看真实结果。
- 「我测过没问题」——只测了好看的主路径。用清空、连点、断网这些边界动作再走一遍。
- 「界面已经变了啊」——界面变了不等于数据变了。去它声称的存储位置核对真实数据。
状态功能能验到「主路径」层:亲手操作、刷新、多窗口、边界动作。状态的真假最常在「刷新」和「第二个窗口」这两个动作上暴露——这两个动作一定要自己试。
考考你 选一个你觉得对的
你让 AI 做了「草稿自动保存」,AI 说完成了。哪个验证最能证明它真的做对了?
「刷新后还在」是持久化状态唯一的硬验证——刷新就是那道生死关。录屏可以预录、口头保证不算、输入框有字只是内存里的当前状态,刷新就没了。