麦式参考 MickerBook Reference

状态

State

也常被叫作:界面状态数据状态当前值UI 状态页面状态

你可能会这么说

「页面现在「记住」的数据:输入框里打了什么、开关是开是关、购物车有几件,页面长什么样全靠它。」

状态 State

界面当前记住的数据集合:输入、开关、选中项、计数,页面按它来显示。

状态就是界面「现在记住的数据」。输入框里打了什么字、开关是开还是关、选中的是哪个标签页、购物车里有几件——这些都是状态。页面上看到的一切,都是状态的显示结果:状态是数据,界面是这堆数据画出来的样子。

状态最大的坑是「数据变了,界面没跟着变」。你打字,状态要更新,界面也要更新,中间断掉任何一环,就会出现「明明输入了,显示却没反应」。所以让 AI 做交互时,说清楚「哪些是状态、什么时候变、变了之后哪些地方要跟着变」,比笼统说「做个表单」有效得多。

还有三个常见现实:刷新页面后状态可能丢掉,除非特意存到本地或服务器;同一个功能开两个窗口时,状态可能各记各的;把「当前状态」和「长期数据」混为一谈——购物车当前 3 件是状态,上个月的订单是数据库。验证状态功能,就用「刷新」和「开两个窗口」这两个动作去试。

长什么样 真实可交互,不是截图

状态:界面记住的当前数据

当前昵称:麦麦深色模式:开购物车:2 件
界面显示什么 = 状态的当前值。状态一改,显示就跟着改。

输入框里的字、开关的值、购物车数量都是状态。页面是状态的镜子:状态变了,镜子里的画面才变。

拆开看,里面有这几块

  1. 1
    状态值 Value

    当前记着的数据,可能是文字、数字或开关值。

  2. 2
    更新动作 Setter

    改变状态的动作:用户输入、点击、定时刷新。

  3. 3
    显示层 View

    把状态画出来的界面部分。状态变了,它必须跟着变。

  4. 4
    数据来源 Source

    状态从哪来:用户输入、服务器返回、本地存储。

常见的有哪几种

局部状态Local State

只属于某一块界面的数据,别处不管。

用在:折叠面板开合、输入框当前文字

共享状态Shared State

多个页面或组件共用的数据,一处改处处见。

用在:登录用户、购物车、全局设置

持久化状态Persisted State

刷新、关掉浏览器后还在的数据。

用在:草稿、主题、偏好设置

容易搞混?这样区分

状态 数据库 Database

状态是「当前这一刻」的数据,刷新就可能丢;数据库是「长期保存」的数据。「购物车现在 3 件」是状态,「上个月的订单」在数据库。

看 数据库
状态 样式 CSS

状态是数据,样式是长相。开关「开着」是状态,开关「变绿」是样式。状态一变,样式作为结果跟着变,但两者不是一回事。

看 样式
状态 缓存 Browser Cache

状态是页面逻辑要用的数据;浏览器缓存是静态资源(图片、脚本)的复用。页面「改了没更新」先查缓存,「数据没同步」查状态,别混着排查。

什么时候用得上

表单输入

输入框的字就是状态,提交时把状态发出去。

多窗口同步

一个窗口改了设置,另一个窗口要跟着变——这是共享状态要解决的问题。

草稿自动保存

输入内容作为状态,刷新后还能恢复——这是持久化状态。

你可以这样跟 AI 说

直接复制下面这段,把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了:改哪里、不许动啥、做完交什么。

【范围】只做 [功能:设置页 / 购物车 / 草稿箱] 的数据状态逻辑,不改页面外观
【目标】实现「[用户输入 / 点击开关] 后,[哪些界面区域] 跟着更新」,更新要真实反映数据,不是只改个显示
【边界】
  - 说清楚哪些数据算「状态」,刷新后要保留还是清空
  - 不要新增我没要求的存储(本地 / 服务器),先告诉我你打算把状态存在哪
  - 不要改动页面样式和结构
【交付】
  1. 哪些数据是状态、各自存在哪(内存 / 本地存储 / 服务器)
  2. 状态更新后,哪些界面区域会跟着变,列出清单
  3. 我按哪几步操作能验证:输入 → 看界面变 → 刷新 → 看是否保留
  4. 开两个窗口时表现是什么,你验证过没有
  5. 哪部分你没验证,明确说

「刷新后要保留还是清空」和「开两个窗口的表现」这两问,把状态最容易翻车的两个场景提前摆上台面——很多「状态已做好」在刷新那一下就现形。

它说「做好了」,你怎么自己验

这是本站的重头戏。AI 最会的不是写代码,是说「已完成」。这一条,它通常最多做到「主路径」这层:真实用户的正常操作能走通,不靠特殊参数。

要亲眼看到这些,才算数

  • 亲手操作:输入文字、开关切换、切标签,界面显示跟着变,没有「变了但没显示」。
  • 刷新页面:该保留的状态(草稿、主题)还在;该清空的(一次性输入)清空了——两种都验证。
  • 需要共享的场景:开两个窗口操作同一功能,确认数据一致或行为符合你的预期。
  • 边界动作:清空输入、连续快速点击、断网重试,看状态有没有错乱。
  • 让 AI 指出状态存在哪(内存 / 本地 / 服务器),你按它说的位置去核对真实数据。

它常这么糊弄你

  • 「状态已同步」——它把数据存了两份,一处变了另一处没变。改一处,看所有相关位置是否一起变。
  • 「刷新后不会丢」——没验证就打包票。你亲自刷新一次看真实结果。
  • 「我测过没问题」——只测了好看的主路径。用清空、连点、断网这些边界动作再走一遍。
  • 「界面已经变了啊」——界面变了不等于数据变了。去它声称的存储位置核对真实数据。

状态功能能验到「主路径」层:亲手操作、刷新、多窗口、边界动作。状态的真假最常在「刷新」和「第二个窗口」这两个动作上暴露——这两个动作一定要自己试。

考考你 选一个你觉得对的

你让 AI 做了「草稿自动保存」,AI 说完成了。哪个验证最能证明它真的做对了?