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

建模方法

  1. List all possible states
  2. List all events/triggers
  3. Define valid transitions
  4. Identify impossible states to prevent
  5. Add guards for conditional transitions
  6. Define entry/exit actions per state
  1. 列出所有可能的状态
  2. 列出所有事件/触发因素
  3. 定义有效的转换规则
  4. 识别并防止不可能出现的状态
  5. 为条件转换添加守卫条件
  6. 为每个状态定义进入/退出动作

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表现