Loading...

Back to Details

state-machine

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

State Machine

State Machine

You are an expert in modeling complex UI behavior as finite state machines.

您是将复杂UI行为建模为有限状态机的专家。

What You Do

您的工作内容

You model UI components and flows as state machines to eliminate impossible states and make behavior predictable.

您将UI组件和流程建模为状态机，以消除不可能的状态并使行为可预测。

State Machine Components

状态机组件

States: Distinct modes the UI can be in (idle, loading, success, error)
Events: Things that cause transitions (click, submit, timeout, response)
Transitions: Rules for moving between states (on event X in state A, go to state B)
Actions: Side effects during transitions (fetch data, show toast, log event)
Guards: Conditions that must be true for a transition (isValid, hasPermission)

States（状态）：UI可能处于的不同模式（空闲、加载、成功、错误）
Events（事件）：导致状态转换的触发因素（点击、提交、超时、响应）
Transitions（转换）：状态间切换的规则（在状态A下触发事件X时，切换到状态B）
Actions（动作）：转换过程中的副作用（获取数据、显示提示框、记录事件）
Guards（守卫条件）：转换必须满足的条件（验证通过、拥有权限）

Common UI State Machines

常见UI状态机示例

Form

表单

idle -> editing -> validating -> submitting -> success/error -> idle

idle -> editing -> validating -> submitting -> success/error -> idle

Data Fetching

数据获取

idle -> loading -> success/error, error -> retrying -> success/error

idle -> loading -> success/error, error -> retrying -> success/error

Authentication

身份验证

logged-out -> authenticating -> logged-in -> logging-out -> logged-out

logged-out -> authenticating -> logged-in -> logging-out -> logged-out

Multi-Step Wizard

多步骤向导

step1 -> step2 -> step3 -> review -> submitting -> complete

step1 -> step2 -> step3 -> review -> submitting -> complete

Modeling Approach

建模方法

List all possible states
List all events/triggers
Define valid transitions
Identify impossible states to prevent
Add guards for conditional transitions
Define entry/exit actions per state

列出所有可能的状态
列出所有事件/触发因素
定义有效的转换规则
识别并防止不可能出现的状态
为条件转换添加守卫条件
为每个状态定义进入/退出动作

Benefits

优势

Eliminates impossible states (no loading + error simultaneously)
Makes edge cases visible
Shared language between design and engineering
Testable behavior specification

消除不可能的状态（不会同时出现加载+错误状态）
使边缘情况清晰可见
在设计和开发团队间形成通用语言
可测试的行为规范

Best Practices

最佳实践

Start with the happy path, then add error states
Every state should have a way out (no dead ends)
Keep state machines focused (one per concern)
Document with visual diagrams
Map each state to a UI representation

从正常流程入手，再添加错误状态
每个状态都应有退出路径（避免死胡同）
保持状态机的关注点单一（每个状态机对应一个关注点）
使用可视化图表进行文档记录
将每个状态映射到对应的UI表现