热重载实验台在同一个页面里看懂状态保留与状态重置开场为什么要把两种更新方式放在一起看很多人第一次接触热重载时最关心的是“点一下之后页面会不会立刻变”。但真正值得观察的并不只是页面有没有刷新而是刷新以后哪些信息还在、哪些信息已经回到了初始状态。一个数字被用户改过一次操作已经发生过页面又切换了颜色主题这些状态如果被完整保留下来说明更新只是重新组织界面如果它们都回到了默认值说明应用经历的是一次重新开始。这个热重载实验台把两种结果放在同一个屏幕里比较。页面顶部用标题和副标题交代实验目的中间的数字卡片负责制造一个容易观察的状态右上区域的开关负责改变预览主题底部的控制台区域负责记录操作次数和最近一次结果。用户可以先改变数字再选择浅色或深色预览最后分别点击“热重载 ®”和“热重启 ®”从而直观看到两条不同的状态路径。页面不依赖复杂业务也不需要连接服务器。它的价值就在于反馈足够直接数字变化是可见的主题变化是可见的操作次数会增加控制台文字会明确写出“状态保留”或“应用状态重置”。因此即使没有接入真正的开发工具联动也能用它理解一次界面更新和一次应用重启在用户感知上的差别。初次打开时页面在表达什么第一次进入页面背景是浅灰色标题“热重载实验台”使用醒目的深色粗体显示下面的说明文字写着“更新 UI 的同时对比状态保留与重启效果”。这两行文字不是装饰而是整个界面的阅读入口。标题告诉用户当前正在观察什么副标题告诉用户观察的重点是“保留”和“重置”的区别。标题下方是一行主题预览控制。左侧文字是“Dark preview”右侧是一个处于关闭状态的开关。此时页面仍然是浅色预览开关所在的白色卡片与浅灰背景形成轻微对比。继续向下看可以看到一个带淡紫色底的数字卡片数字初始为 0字号明显大于其他文字。数字下方有“修改界面状态 1”按钮它是整个实验最重要的准备动作。用户只有先点击它才能在后面清楚观察状态是否被保留。数字卡片下面是两个并排按钮。左边的蓝色按钮是“热重载 ®”右边的红色按钮是“热重启 ®”。颜色和位置让两者形成明确的对照蓝色代表继续当前会话并观察更新红色代表从头开始并观察重置。底部的灰色反馈卡片标题是“控制台输出 · 已操作 0 次”正文是“Hot reload service ready”。这说明页面刚加载完成还没有执行过热重载或热重启操作。从初始画面还可以看出几个设计取舍。页面没有堆叠复杂的菜单也没有把大量说明放在屏幕上而是用一个数字、一个开关、两个按钮和一段反馈文字组成最小可观察闭环。用户不需要先学习一套复杂规则按照“改数字—切换主题—选择更新方式—看结果”的顺序就能完成一次实验。数字卡片给状态变化准备一个清晰参照物数字卡片显示的内容从 0 开始每次点击“修改界面状态 1”数字增加 1。这个操作看起来非常简单却承担了实验中的参照作用。假设用户连续点击三次页面数字就从 0 变成 3。之后点击蓝色的热重载按钮如果数字仍然是 3用户就能直接确认当前数字状态被保留如果点击红色热重启按钮后数字重新显示 0用户就能直接确认重启路径把它清空了。数字使用大字号和居中排版原因是它需要在操作前后容易被比较。卡片内部还有一个固定的紫色按钮按钮颜色与数字卡片的淡紫色背景属于同一组视觉语言。按钮的职责也很单一只增加数字不改变主题不增加操作次数不修改底部提示。这样做可以把“状态被修改”和“更新方式被选择”拆开用户更容易判断每次动作的影响范围。连续点击数字按钮时页面不会弹出额外提示也不会限制最大值。数字可以从 0 变成 1、2、3也可以继续增长。因为这个页面没有输入框用户不能直接输入负数或小数数字的变化路径始终是每次加 1。这样的交互适合做观察实验状态变化来源固定结果容易复现。数字卡片还会受到主题开关的影响。浅色预览下卡片背景是淡紫色深色预览下卡片背景会切换到更深的蓝灰色但数字仍然使用紫色显示。也就是说主题切换改变的是容器和文字的配色不会顺便修改数字内容。把这两个维度分开可以让用户确认“主题变化”和“业务状态变化”是两个独立的状态。Dark preview主题变化和数据变化是两条不同的线打开“Dark preview”开关后页面整体背景会变成深色标题和说明文字变成适合深色背景阅读的浅色主题卡片、数字卡片以及底部反馈区域也会同步调整颜色。开关本身所在的区域变成深蓝灰色标题区域不再使用原来的深色文字控制台标题与正文也会使用更亮的灰色。这个变化并不代表真正切换了系统级深色模式。它只改变当前页面中预先写好的几组颜色让用户观察同一组内容在不同背景下如何重新组合。页面中的数字、操作次数和控制台文字仍然保持原来的内容。例如数字是 3 时打开开关数字仍然是 3已经操作过两次时打开开关底部仍然会显示“已操作 2 次”。关闭开关后页面会回到浅色预览数字和操作次数也不会因此清零。这个细节很重要主题开关只是一个布尔状态它负责决定页面采用哪一套视觉颜色不负责重置实验数据。用户可以反复打开和关闭开关同时观察数字和底部记录是否保持稳定。从阅读顺序上看主题卡片位于标题和数字卡片之间正好把“视觉状态”放在“数据状态”之前。这样安排有一个实际好处用户切换主题时能够同时看到背景、文字、卡片三处发生变化而点击数字按钮时变化集中在数字卡片内部。两种动作在空间上分开视觉反馈也不会混在一起。热重载按钮更新后保留当前数字点击“热重载 ®”按钮后页面会增加一次操作计数并把底部正文更新成类似“Reload #1: UI updated, state preserved (3)”的内容。其中#1表示这是第一次执行更新类操作括号中的 3 表示当前数字仍然是 3。再次点击后计数会变成 2文字中的序号也会变成 2括号里的数字继续显示当前值。这里的“状态保留”是这个页面用文字模拟出来的观察结果。按钮点击会调用页面内部的更新逻辑逻辑会增加操作次数并更新控制台文本但不会把数字改回 0。对于用户来说最直观的证据就是数字卡片没有变化底部文字又明确写出了“state preserved”。热重载按钮不会自动切换深浅主题。假设用户先把数字改到 5再把主题切换到深色最后点击热重载页面仍会保持深色数字也仍然是 5只有操作次数和底部正文发生更新。这表明页面把数字、主题和操作记录分别保存更新类动作只触碰它需要更新的那一部分。如果用户不先点击数字按钮直接点击热重载结果会是“Reload #1: UI updated, state preserved (0)”。这并不是没有发生变化而是页面当前没有需要保留的非零数字。控制台仍然会更新操作次数仍然会从 0 变成 1所以用户可以从两个地方确认按钮生效一个是底部计数另一个是反馈正文。热重启按钮把数字恢复到默认状态点击“热重启 ®”按钮后页面同样会增加操作计数但数字会被设置回 0底部正文变成类似“Restart #2: application state reset”的文字。这里的序号会沿用之前已经发生的操作总次数因此如果用户此前进行过一次热重载再点击一次热重启标题可能显示“已操作 2 次”正文会显示Restart #2。热重启按钮和数字按钮的关系很直接。数字按钮把数值向上推进热重启按钮把数值拉回起点。无论当前数字是 1、5 还是更高点击热重启后都会回到 0。主题开关则不在这个重置范围内如果用户在深色预览下点击热重启数字会清零但页面仍然保持深色说明重启逻辑只重置数字状态和更新反馈并没有把主题开关一起关闭。这也是页面设计中很容易被忽略的一个边界。文字写着“application state reset”但从页面实际可见结果看重置的是实验里的数字状态并不是把所有可见状态都恢复到第一次打开页面时的样子。操作总次数还会继续累加主题也会保持当前选择。阅读这类演示页面时应该以实际交互结果为准不把一句提示文字扩大解释成更大的系统能力。如果连续点击热重启数字会一直保持 0操作次数会持续增加控制台正文中的重启序号也会不断变化。这个结果说明操作次数与数字状态是两套数据前者记录发生了多少次更新或重启后者代表当前实验数值。操作次数把每次按钮动作串成一条可读记录底部反馈卡片的标题会显示“控制台输出 · 已操作 N 次”。这里的 N 不是数字卡片当前的值而是热重载和热重启两类按钮被点击的累计次数。点击“修改界面状态 1”不会增加 N因为它改变的是实验数字不属于更新方式选择。例如用户先点击数字按钮三次再点击热重载两次标题会显示“已操作 2 次”数字会显示 3。此时两个数字各自有清晰含义3 是被观察的界面状态2 是更新实验已经执行的次数。再点击一次热重启后数字回到 0标题变成“已操作 3 次”反馈正文记录的是重启结果。这种分离让页面很适合做多轮实验。用户可以在每一轮实验前先把数字改成不同的值再选择热重载或热重启观察结果是否符合预期。即使不使用外部日志也能从屏幕上的数字和底部文字还原刚才的操作顺序。操作次数没有独立的清零按钮也不会因为主题切换而重置。只有页面重新创建或退出后再次进入才可能回到初始的 0 次状态。这个页面没有提供历史列表因此底部只能展示当前累计次数和最近一次正文不能回看更早的每一次操作。四条状态的协同关系页面的可见行为可以拆成四个彼此配合的状态实验数字、操作次数、深色预览和控制台正文。实验数字决定数字卡片显示什么操作次数决定底部标题中的数量深色预览决定页面采用哪套颜色控制台正文说明最近一次热重载或热重启的结果。它们之间并不是完全互相牵连。点击数字按钮只增加实验数字切换主题只改变视觉样式点击热重载增加操作次数并更新正文同时保留实验数字点击热重启增加操作次数、更新正文并把实验数字归零。正因为每个动作影响范围不同用户才可以通过组合操作来观察状态管理的边界。可以用下面的流程理解页面的变化打开页面实验数字为 0操作次数为 0主题为浅色控制台显示服务就绪。点击数字按钮实验数字增加 1其他状态不变。打开深色预览页面颜色改变数字和操作次数不变。点击热重载操作次数加 1控制台说明界面更新并保留当前数字。点击热重启操作次数再加 1实验数字回到 0控制台说明应用状态已重置。这条路径没有网络请求也没有异步加载。每个按钮事件完成后状态文本会立即变化反馈速度稳定且容易观察。对于理解声明式 UI 来说这种确定性的页面比复杂业务更适合入门因为每一个结果都能回到一个具体的用户动作。页面布局从标题到反馈形成一条垂直阅读路径页面整体使用垂直排列。根区域占满可用空间四周留出统一内边距模块之间保持相同节奏的空白。顶部标题区负责说明实验主题主题卡片负责视觉预览数字卡片负责状态准备按钮行负责选择更新方式底部卡片负责输出结果。标题字号最大数字字号更大按钮文字保持中等大小控制台正文较小但有足够行高。这样的层级能够让用户先看到页面名称再看到当前数字最后阅读操作反馈。两个主要按钮并排放置宽度尽量均衡使热重载和热重启成为一组可以直接比较的操作。数字卡片使用圆角和内边距把数字与按钮包在同一个视觉单元中。按钮行与数字卡片之间留有间距避免用户误以为“热重载”是数字加一的另一种写法。底部反馈卡片使用另一种灰色背景既能与数字卡片区分又不会抢过按钮和数字的注意力。深色预览下布局位置不变变化集中在颜色。标题仍在顶部开关仍在同一行数字仍处在中央两个按钮仍然左右排列控制台仍在底部。这种“结构不变、皮肤变化”的做法便于比较主题切换的效果也避免用户因为界面移动而误判状态发生了变化。反馈文字为什么要写出当前数字热重载反馈中带有括号数字例如“state preserved (3)”这让文字和数字卡片形成互相验证。只看数字卡片用户知道数字当前是 3只看控制台用户知道更新逻辑声称保留的是 3两处信息一致时状态保留的结论更清晰。热重启反馈没有在正文里重复当前数字而是强调“application state reset”。数字卡片回到 0文字强调重置二者形成另一种对照。一个动作让旧值继续存在一个动作让旧值回到起点页面用不同的文字告诉用户这两条路径的含义。控制台标题只展示累计次数不展示复杂日志。这样既能说明操作已经发生又不会让用户阅读一大段文本。最近一次结果放在正文位置旧结果会被覆盖因此它更像“当前状态说明”而不是完整操作历史。多种操作顺序下会发生什么先改数字再热重载这是最容易观察的路径。数字从 0 增加到某个值后点击热重载数字不动控制台显示更新后的序号和被保留的数字。主题无论是浅色还是深色都不会影响这个结论。先改数字再热重启数字会被清零控制台切换为重启文字操作次数加一。若再次点击热重载控制台会显示保留的 0因为上一次重启已经把数字状态恢复到了初始值。先切换深色再改数字页面先变成深色预览之后数字卡片中的数字继续按每次点击增加。最后执行热重载时深色主题和数字都会保持说明主题和数字相互独立。反复切换主题再点击热重启主题开关可以多次打开和关闭最后一次选择决定页面颜色。点击热重启只会把数字恢复到 0不会强制把主题恢复为浅色。用户可以借此观察“重置部分状态”和“保留部分状态”同时存在的情况。连续点击两类更新按钮热重载和热重启每点击一次操作次数都会加一正文只显示最后一次动作的结果。比如先热重载、再热重启最后看到的是重启反馈但标题中的操作总数包含两次动作。页面没有提供历史明细所以不能仅靠底部正文判断更早的一次是热重载还是热重启。这个页面能够说明什么不能说明什么它能够说明声明式页面中状态变化会反映到数字、颜色和文字上能够说明一个更新类动作可以保留某个状态而重启类动作可以把某个状态恢复到默认值能够说明多个独立状态可以分别受到不同交互的控制。它不能证明真实开发工具已经完成了热重载联动。页面按钮的文字带有“热重载”和“热重启”控制台也会输出对应文本但这些行为来自页面内部的演示逻辑。当前页面没有展示外部 IDE 监听、代码变化、设备端补丁传输、真实应用进程重启也没有连接远端调试服务。因此“状态保留”应理解为当前界面给出的演示结果而不是对系统级热重载机制的完整验证。同样“Dark preview”也不等同于系统深色模式适配。它只切换当前页面定义好的背景色、文字色和卡片色。页面没有提供跟随系统设置、保存用户主题偏好或同步其他页面主题的功能。页面还没有异常提示。数字按钮不会失败主题切换没有加载过程热重载和热重启也没有错误分支。它适合讲清楚正常路径和状态差异不适合直接代表真实工具在编译失败、连接断开、补丁应用失败等情况下的行为。从用户视角进行一次完整体验可以把一次完整体验安排成五分钟内完成的观察实验。打开页面后先记住数字 0、操作次数 0 和浅色主题。点击数字按钮三次确认数字变成 3。打开深色预览确认页面变暗但数字仍为 3。点击热重载观察数字是否保留确认控制台出现更新序号和保留数字的文字。接着点击热重启观察数字回到 0确认控制台改为重置文字。第二轮可以先在深色预览下把数字增加到 2再连续点击热重载两次。此时数字应保持 2操作次数应增加 2。然后关闭深色预览确认页面恢复浅色但数字与操作次数不变。最后点击热重启数字回到 0操作次数继续增加。第三轮可以只点击热重启不改变数字。此时数字仍是 0但操作次数会继续增加正文会显示新的重启序号。这能帮助用户理解“按钮有动作”和“数字是否变化”并不是一回事热重启确实发生了但因为数字本来就是 0所以数字表面上没有变化。适合初学者关注的 ArkUI 思路这个页面没有使用复杂组件却能展示声明式 UI 的基本观察方法。首先页面上看到的内容都可以理解成状态的投影。数字是一个状态的投影开关是一个布尔状态的投影控制台标题和正文是操作记录状态的投影背景和文字颜色是主题状态的投影。其次事件本身不直接“命令”某个控件改变颜色或文字而是更新对应的数据。数字按钮修改数值主题开关修改真假热重载和热重启修改操作记录并在重启时重置数字。页面根据状态重新呈现所以同一份状态可以同时影响多个区域主题状态会影响标题、说明、卡片和控制台操作次数会影响标题和正文序号。再次状态要有清晰边界。若把数字、主题和操作次数混成一个字段用户很难判断一次点击到底改变了什么。当前页面把它们拆开正好适合用来理解状态的职责划分。页面越小状态之间的关系越容易被看清楚。颜色变化背后的阅读顺序浅色预览使用浅灰背景和白色卡片让紫色数字成为视觉中心蓝色和红色两个按钮用来区分两种更新路径底部灰色卡片承担信息输出。深色预览则把页面整体压到深蓝灰色范围标题、说明和反馈文字提高亮度确保文字仍然易读。紫色没有因为主题切换而更换数字和主按钮仍保留鲜明色彩这有助于用户在两种主题下快速找到实验主体。真正变化最大的是容器背景和次要文字颜色。这样的配色方式使“主题变化”足够明显同时不让用户把颜色变化误认为数字状态或更新结果变化。按钮颜色也传递了不同的操作心理。蓝色的热重载更像继续当前工作红色的热重启提醒用户可能会看到状态被清空。页面没有使用弹窗二次确认因此颜色和文字就是主要的风险提示。对于一个演示台来说这种直接反馈足够清楚对于真实工具则还需要更完整的确认和错误提示设计。可复现的观察结果为了让每次观察尽量一致可以固定一组步骤数字按钮点击两次主题开关打开热重载一次再点击热重启一次。执行完毕后预期看到的是深色页面、数字 0、控制台累计操作 2 次最近一次正文是重启结果。若把最后一步换成热重载预期则是深色页面、数字 2、操作次数 2正文说明数字被保留。另一组步骤是先点击热重启两次再点击数字按钮一次最后点击热重载。预期数字为 1操作次数为 3正文中的热重载序号为 3括号里显示 1。这个例子说明重启只影响当时的数字之后仍然可以重新建立新的数字状态。如果在任意阶段切换主题最终主题由最后一次开关位置决定其他数值不受影响。即使重复打开关闭开关也不会增加操作次数因为主题切换不是热重载或热重启。这个可观察规则让用户能够把主题操作排除在更新计数之外。文章内容与页面边界的对应关系页面实际展示了一个热重载实验台、一个主题预览开关、一个数字修改按钮、两个更新方式按钮和一个控制台反馈卡片。文章围绕这些元素展开因此读者阅读后可以回到页面逐一找到对应内容。数字、操作次数、主题和正文之间的关系都能通过点击操作验证。页面没有文件选择器、代码编辑器、编译日志列表、设备连接列表和网络请求所以文章不把这些内容写成已有功能。页面也没有真实的计时器反馈中的序号是操作计数不应理解成热重载耗时。页面没有保存历史记录因此底部正文只代表最近一次更新结果不代表完整日志。这种边界意识对于技术文章尤其重要。一个演示界面可以用文字和按钮说明概念但文字说明不等于底层能力已经接通。只有当前页面能直接展示和重复验证的内容才适合作为这篇独立文章的主体。至于真正的开发工具联动、代码变化监听、补丁分发和进程管理需要另外的系统能力和验证条件不能从这个小页面直接推导出来。一次操作如何被用户读懂一个按钮动作是否容易理解取决于页面有没有把动作、结果和影响范围说清楚。这个页面在每次更新操作后都同时改变两个地方底部标题中的次数会增加正文会替换成新的结果描述。热重载还会在正文中带上当前数字热重启则会让数字卡片回到零。用户不需要猜测按钮是否生效也不需要离开当前页面寻找日志。如果按钮只改变了数字却没有说明它为什么改变用户可能把它当成普通的计数器如果按钮只更新文字却没有让数字卡片发生相应变化用户又难以判断文字是否可信。当前页面让这两处反馈互相印证数字卡片是状态结果控制台正文是语义解释底部次数是动作记录。三者组合后一次点击就有了完整的阅读闭环。这套闭环还体现在主题开关上。开关切换没有增加操作次数也没有替换控制台正文因为它不是更新流程的一步而是观察环境的调整。页面把它放在实验主按钮之前用户可以在任何阶段切换主题而不破坏数字实验。这样的安排降低了操作之间的耦合读者可以放心地反复比较浅色和深色而不必重新开始。让两种路径保持可比较热重载和热重启的按钮高度一致、宽度相近、放在同一行用户可以在同一个视觉区域内比较它们。两者的差别主要通过颜色、文字和结果体现而不是通过完全不同的布局体现。如果一个按钮放在页面顶部、另一个按钮藏在底部用户需要额外记忆位置比较就会变得困难。比较实验时最好先让数字处于非零状态。数字 0 虽然是合法的初始值但热重启后仍然显示 0表面上看不出数字发生过重置。数字为 4 或 5 时再点击热重启结果会明显得多。之后可以把页面回到相同的主题和数字再用热重载进行对照这样更容易把“保留”和“清零”区分开。操作次数可以帮助用户避免记错实验阶段。比如先热重载一次再热重启一次底部会显示已经操作两次。即使正文只保留最近一次重启描述用户仍能知道本轮实验包含两个更新动作。它不是完整日志但足够支持短流程的现场观察。小屏幕上的阅读重点页面采用纵向排列适合在较窄的设备屏幕上阅读。顶部标题和说明先占据视线数字卡片使用居中排版两个更新按钮占据一行反馈区域放在最后。用户单手操作时可以按从上到下的顺序完成实验不需要在多个页面之间来回跳转。深色预览下标题和说明文字提高亮度控制台正文也使用较亮的灰色。这里的重点不是追求复杂的主题系统而是保证颜色变化后仍能读到文字。数字使用固定的紫色与深色背景形成对比两个更新按钮也保持明显的蓝色和红色。视觉重点没有因为换肤而消失。如果屏幕高度较小用户可能需要滚动才能同时看到数字卡片和底部反馈。即使出现这种情况页面的操作顺序仍然不变先改变数字再触发更新最后查看反馈。只要用户记住当前数字和底部次数就可以在滚动后继续完成比较。页面没有弹窗遮挡也没有需要横向拖动的内容因此不会把主要结果藏在复杂交互里。反复使用时应当注意的状态边界实验数字可以不断加一但操作次数只由两个更新按钮增加。若用户连续点击数字按钮十次数字会变成十底部仍然可能显示“已操作 0 次”。这不是计数错误而是两个计数器承担不同职责。一个描述界面状态一个描述更新流程。如果用户先把数字加到十再点击热重载三次数字仍然是十操作次数变成三。若接着点击热重启数字回到零操作次数变成四。此后再点击数字按钮一次数字变成一但操作次数仍是四。这个过程很适合用来验证重启只影响数字不会倒退已经发生的更新次数。主题开关也有自己的边界。它可以在更新前切换也可以在更新后切换切换前后数字不变底部次数不变最近一次控制台正文也不变。只有页面的背景、卡片和文字颜色发生改变。把主题开关放进每一轮实验中可以确认视觉状态不会偷偷参与数字重置。适合写进技术说明的真实结论从页面可以准确得到的结论包括页面有一个可递增的数字状态有一个不参与更新计数的深色预览开关热重载操作会增加累计次数并在文字中展示当前数字热重启操作会增加累计次数并把数字设置为零底部只展示累计次数与最近一次反馈。上述结论都能通过可见交互验证。不能从页面直接得出的结论包括外部开发工具是否真的检测到代码变化更新补丁是否真的发送到设备应用进程是否真的被重新启动状态是否跨越了不同的设备或应用实例以及一次更新需要多少毫秒。页面没有这些观测入口反馈中的序号也不是耗时数据。把边界写清楚读者就不会把一个清晰的概念演示误认为完整的工具链实现。观察时的三个小提示第一先记录数字再点击更新按钮。数字是最容易被忽略、也最能说明差异的内容先记住它后面才能判断是否保留。第二分开观察按钮结果和主题结果。主题切换只影响颜色更新按钮才影响次数和正文把两者分开操作结论会更清楚。第三阅读底部正文时同时看标题次数。正文说明最近一次动作标题说明累计动作两个位置合起来才能还原当前实验阶段。如果一次操作没有改变你预期的内容可以回到初始状态重新做一遍确认数字从零开始主题处于浅色底部次数为零然后只执行一个动作。页面没有复杂的异步过程所以单步观察能够很快定位差异来自哪一个按钮。对初学者而言先建立这种“一个动作对应一个结果”的习惯比一开始追求复杂的工具链更有帮助。结语热重载实验台的核心不是按钮数量而是让“更新后保留状态”和“重启后恢复状态”变成可以直接观察的结果。用户先用数字按钮制造变化再用主题开关观察视觉状态最后通过蓝色热重载按钮和红色热重启按钮比较两种路径。底部控制台把操作次数和最近一次结果写出来使页面不只展示变化还能解释变化。从这个页面可以得到一个很实用的理解状态保留不是一句抽象概念而是更新前后的数字、主题和反馈文字能够对应起来状态重置也不是简单的页面刷新而是指定的状态回到默认值同时其他状态可能继续保留。把这些差异放到同一个页面里初学者无需依赖复杂工具就能先建立正确的观察方式。如果把它当作一个独立的 UI 示例最值得复现的是三条路径改变数字后执行热重载确认数字和主题继续存在改变数字后执行热重启确认数字回到 0在两种路径之间切换主题确认主题是独立变化的状态。只要这三条路径能够清楚复现页面的教学目的就已经达成。