前端
状态State
你可能会问
状态到底是什么？为什么界面能「记得」你刚才做过什么？
简单来说
决定界面当前如何显示的数据，例如菜单是否展开或用户是否登录。
state
menu"收起""展开"
unread03
界面照着数据画
01 · 先这样理解
把抽象概念放进真实场景
决定界面当前如何显示的数据，例如菜单是否展开或用户是否登录。
换个角度想状态像球场的记分牌：比分记在牌子上，而不是观众的喊声里。每得一分先改记分牌，全场看到的比分自然同时更新。
02 · 点击演示
点一下按钮，状态经历了什么？
突出显示的部分，就是当前概念在整条流程中负责的位置。
- 初始 state
likedfalsecount0 click
「该更新了」
先变的是数据，不是界面count- 同一份 count · 两处显示角标0文字0 人觉得有用
1 / 4
Initial · 给界面一个初始状态
03 · 放进真实任务
什么时候会遇到它
记住操作
菜单展开还是收起、深色还是浅色模式，背后都是一份状态。
同步显示
购物车角标、列表和结算价读同一份状态，所以永远一致。
排查错乱
界面显示不对时，先看状态数据对不对，再查渲染逻辑。
04 · 想一想
用一个问题检查理解
点了「收藏」，图标变红了；刷新页面又变回了灰色。这说明状态存在哪里？
查看答案
变红说明点击更新了内存里的状态；刷新后丢失，说明它只存在内存里，没有写到后端或本地存储。想让页面「记住」，就要把状态持久化。
最容易踩的坑
状态越多，界面越难预测。能从现有状态算出来的值（比如总价）不要再存一份，两份数据迟早会对不上。