状态机 XState

以下是关于 状态机（XState） 基本知识的梳理，涵盖核心概念、高级特性、实际应用场景及最佳实践，帮助我们掌握这一强大的状态管理工具：

---

一、状态机核心概念

1. 有限状态机（Finite State Machine, FSM）基础

• 定义：系统在有限状态集合中流转，由事件触发状态转换
• 核心要素：
  • States（状态）：系统可能处于的所有状态集合
  • Events（事件）：触发状态转换的外部输入
  • Transitions（转换）：事件触发后的状态变化规则
  • Actions（动作）：状态转换时执行的副作用

2. 扩展状态机（Extended State Machine）

• 上下文（Context）：携带额外数据的存储对象
• 守卫（Guards）：条件判断，决定是否允许转换
• 延迟事件（Delayed Events）：定时触发的自动事件

3. 状态图（Statecharts）

• 层级状态：通过嵌套状态管理复杂逻辑
• 并行状态：同时激活多个状态分支
• 历史状态：记录并恢复之前的状态

---

二、XState 核心概念

1. 核心API结构

const machine = createMachine({
   
  id: 'toggle',
  initial: 'inactive',
  context: {
    count: 0 },
  states: {
   
    inactive: {
   
      on: {
    TOGGLE: 'active' }
    },
    active: {
   
      on: {
    TOGGLE: 'inactive' },
      entry: 'logActivation'
    }
  }
});

2. 状态机配置要素

属性	说明
id	状态机唯一标识
initial	初始状态
context	扩展状态数据
states	状态定义
on	事件处理器
entry/exit	进入/退出状态时的动作
activities	持续活动（如轮询）
invoke	调用外部服务（Promise/回调/其他状态机）

3. 事件与转换

on: {
   
  // 基础转换
  EVENT: 'targetState',
  
  // 条件转换
  EVENT: {
   
    target: 'stateA',
    cond: (ctx) => ctx.value