以下是关于 状态机(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