1
2
3
4
5
6
7
8
9
10
11

传统轮询模式：
while (true) {
    if (condition_A()) handle_A();
    if (condition_B()) handle_B();
    // 持续轮询...
}
事件驱动模式：
eventQueue.on('event_A', handle_A);
eventQueue.on('event_B', handle_B);
// 被动等待事件到来

1
2
3
4
5

while (running) {
    event = getNextEvent();     // 从队列取事件
    dispatch(event);            // 分发给处理器
    // 处理器必须快速完成（RTC）
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

┌─────────────────────────────┐
│       Active Object         │
│  ┌───────────────────────┐  │
│  │    Event Queue        │  │
│  │  [e1] [e2] [e3] ...  │  │
│  └──────────┬────────────┘  │
│             │               │
│             ▼               │
│  ┌───────────────────────┐  │
│  │   State Machine       │  │
│  │                       │  │
│  │  [State A] ──►[State B]│  │
│  │     │            │    │  │
│  │     ▼            ▼    │  │
│  │  Actions        Actions   │
│  └───────────────────────┘  │
│         │                   │
│         ▼                   │
│  ┌───────────────────────┐  │
│  │   Private Data        │  │
│  └───────────────────────┘  │
└─────────────────────────────┘
         │
         │ async events
         ▼
   Other Active Objects

1
2
3
4
5

interface Event {
    type: string;       // 事件类型
    payload?: any;      // 携带的数据
    timestamp?: number; // 时间戳
}

1

[源状态] + [触发事件] + [守卫条件] → [目标状态] + [动作]

1
2
3
4
5

// 只有余额充足时才允许转换到"购买成功"
{
    target: 'purchaseSuccess',
    guard: ({ context }) => context.balance >= context.price
}

1
2
3
4
5
6
7
8

const machine = createMachine({
    context: {
        retries: 0,
        maxRetries: 3,
        lastError: null,
    },
    // ...
});

1
2
3
4
5

// ❌ 错误：状态中混入了行为描述
states: ['loading', 'showingError', 'submittingForm']
// ✅ 正确：状态描述系统的客观情况
states: ['idle', 'loading', 'error', 'success']

1
2
3
4
5

// ❌ 错误：isLoading 和 error 可能同时为 true
{ isLoading: true, error: '网络错误' }
// ✅ 正确：互斥的状态
state: 'loading' | 'error' | 'success'

1
2
3
4
5

// ❌ 布尔标志组合
{ isIdle, isLoading, isSuccess, isError }
// ✅ 单一状态枚举
type State = 'idle' | 'loading' | 'success' | 'error';

1
2
3
4
5
6

interface MachineContext {
    data: null | Response;
    error: null | Error;
    retryCount: number;
}
type State = 'idle' | 'loading' | 'success' | 'error';

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const appMachine = createMachine({
    initial: 'unauthenticated',
    states: {
        unauthenticated: {
            initial: 'login',
            states: {
                login: {},
                register: {},
                forgotPassword: {},
            }
        },
        authenticated: {
            initial: 'dashboard',
            states: {
                dashboard: {},
                settings: {},
                profile: {},
            }
        }
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 测试状态转换
const actor = createActor(loginMachine);
actor.start();
actor.send({ type: 'submit', username: 'test', password: '123' });
expect(actor.getSnapshot().value).toBe('loading');
// 测试守卫条件
actor.send({ type: 'success', data: mockData });
expect(actor.getSnapshot().value).toBe('authenticated');
// 测试不应发生的转换
actor.send({ type: 'submit' }); // 已认证状态不应接受 submit
expect(actor.getSnapshot().value).toBe('authenticated'); // 状态不变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import { createMachine, assign, createActor } from 'xstate';
const fetchMachine = createMachine({
    id: 'fetch',
    initial: 'idle',
    context: {
        data: null,
        error: null,
        retries: 0,
    },
    states: {
        idle: {
            on: {
                FETCH: { target: 'loading' }
            }
        },
        loading: {
            entry: assign({ retries: ({ context }) => context.retries + 1 }),
            invoke: {
                src: 'fetchData',
                onSuccess: { target: 'success', actions: assign({ data: ({ event }) => event.data }) },
                onError: [
                    { guard: ({ context }) => context.retries < 3, target: 'loading' },
                    { target: 'failure', actions: assign({ error: ({ event }) => event.error }) }
                ]
            }
        },
        success: {
            on: {
                FETCH: { target: 'loading' }
            }
        },
        failure: {
            on: {
                RETRY: { target: 'loading' }
            }
        }
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

from transitions import Machine
class Task:
    states = ['todo', 'in_progress', 'review', 'done', 'failed']
    def __init__(self):
        self.machine = Machine(
            model=self,
            states=Task.states,
            initial='todo'
        )
        self.machine.add_transition('start', 'todo', 'in_progress')
        self.machine.add_transition('submit', 'in_progress', 'review')
        self.machine.add_transition('approve', 'review', 'done')
        self.machine.add_transition('reject', 'review', 'in_progress')
        self.machine.add_transition('fail', ['in_progress', 'review'], 'failed')
        self.machine.add_transition('reset', 'failed', 'todo')
task = Task()
task.start()      # todo -> in_progress
task.submit()     # in_progress -> review
task.reject()     # review -> in_progress

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// 定义事件
typedef struct {
    QEvt super;     // 基类事件
    uint16_t key;   // 键码
} KeyboardEvt;
// 定义 Active Object
typedef struct {
    QActive super;  // 基类
    uint8_t volume;
} PlayerAO;
// 状态处理函数
QState Player_initial(PlayerAO *me, void const *par) {
    return Q_TRAN(&Player_idle);
}
QState Player_idle(PlayerAO *me, QEvt const *e) {
    switch (e->sig) {
        case PLAY_SIG:
            return Q_TRAN(&Player_playing);
        case OFF_SIG:
            return Q_TRAN(&Player_off);
    }
    return Q_SUPER(&QHsm_top);
}
QState Player_playing(PlayerAO *me, QEvt const *e) {
    switch (e->sig) {
        case STOP_SIG:
            return Q_TRAN(&Player_idle);
        case KEY_PRESS_SIG: {
            KeyboardEvt *ke = (KeyboardEvt *)e;
            me->volume += ke->key;
            return Q_HANDLED();
        }
    }
    return Q_SUPER(&QHsm_top);
}

1
2

// 灾难：两个标志同时为 true
{ isLoading: true, isError: true, isSuccess: true }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import { useMachine } from '@xstate/react';
function LoginComponent() {
    const [state, send] = useMachine(loginMachine);
    return (
        <div>
            {state.matches('idle') && <LoginForm onSubmit={() => send({ type: 'SUBMIT' })} />}
            {state.matches('loading') && <Spinner />}
            {state.matches('success') && <Navigate to="/dashboard" />}
            {state.matches('error') && (
                <ErrorMessage 
                    error={state.context.error}
                    onRetry={() => send({ type: 'RETRY' })}
                />
            )}
        </div>
    );
}

1
2
3
4
5

待支付 ──支付成功──► 待发货 ──发货──► 已发货 ──确认收货──► 已完成
  │                    │                     │
  │  超时              │  取消               │  退货
  ▼                    ▼                     ▼
已取消              已取消              退货中 ──退款──► 已退款

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

const enemyAI = createMachine({
    initial: 'patrol',
    context: { playerDistance: Infinity, health: 100 },
    states: {
        patrol: {
            on: { PLAYER_DETECTED: 'chase' }
        },
        chase: {
            on: {
                IN_ATTACK_RANGE: 'attack',
                PLAYER_LOST: 'patrol',
                LOW_HEALTH: 'flee'
            }
        },
        attack: {
            on: {
                TARGET_DEAD: 'patrol',
                OUT_OF_RANGE: 'chase',
                LOW_HEALTH: 'flee'
            }
        },
        flee: {
            on: {
                SAFE: 'patrol',
                DEAD: 'dead'
            }
        },
        dead: { type: 'final' }
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 状态：关灯、开灯白光、开灯暖光、配网中、OTA升级
// 事件：按键、MQTT消息、定时器、传感器
QState Bulb_onWhite(Bulb *me, QEvt const *e) {
    switch (e->sig) {
        case BUTTON_PRESS_SIG:
            return Q_TRAN(&Bulb_warm);
        case MQTT_CMD_SIG:
            // 处理远程控制命令
            handleMqttCmd(me, (MqttEvt *)e);
            return Q_HANDLED();
        case TIMEOUT_SIG:
            return Q_TRAN(&Bulb_off);
    }
    return Q_SUPER(&Bulb_on);
}

1
2
3
4
5

CLOSED ──SYN──► SYN_SENT ──SYN+ACK──► ESTABLISHED
                                    │
                                    │ FIN
                                    ▼
                              FIN_WAIT ──ACK──► TIME_WAIT ──超时──► CLOSED

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

type State = string;
type Event = { type: string; [key: string]: any };
interface TransitionConfig {
    target: State;
    guard?: (ctx: any, event: Event) => boolean;
    actions?: Array<(ctx: any, event: Event) => any>;
}
interface StateConfig {
    on?: Record<string, TransitionConfig | TransitionConfig[]>;
    entry?: Array<(ctx: any, event: Event) => any>;
    exit?: Array<(ctx: any, event: Event) => any>;
}
interface MachineConfig {
    initial: State;
    context: Record<string, any>;
    states: Record<string, StateConfig>;
}
class StateMachine {
    private current: State;
    private context: Record<string, any>;
    private config: MachineConfig;
    private listeners: Array<(state: State, context: any) => void> = [];
    constructor(config: MachineConfig) {
        this.config = config;
        this.current = config.initial;
        this.context = { ...config.context };
    }
    get state() { return this.current; }
    get ctx() { return this.context; }
    subscribe(listener: (state: State, context: any) => void) {
        this.listeners.push(listener);
        return () => {
            this.listeners = this.listeners.filter(l => l !== listener);
        };
    }
    send(event: Event): void {
        const stateConfig = this.config.states[this.current];
        if (!stateConfig?.on?.[event.type]) return;
        const transitions = Array.isArray(stateConfig.on[event.type])
            ? stateConfig.on[event.type]
            : [stateConfig.on[event.type]];
        for (const transition of transitions) {
            if (transition.guard && !transition.guard(this.context, event)) continue;
            // 执行 exit 动作
            stateConfig.exit?.forEach(action => action(this.context, event));
            // 执行转换动作
            transition.actions?.forEach(action => action(this.context, event));
            // 切换状态
            const prevState = this.current;
            this.current = transition.target;
            // 执行 entry 动作
            const newStateConfig = this.config.states[this.current];
            newStateConfig?.entry?.forEach(action => action(this.context, event));
            // 通知监听者
            this.listeners.forEach(l => l(this.current, this.context));
            console.log(`[${prevState}] --${event.type}--> [${this.current}]`);
            return; // 只执行第一个匹配的转换
        }
    }
}
// 使用示例
const trafficLight = new StateMachine({
    initial: 'red',
    context: { cycleCount: 0 },
    states: {
        red: {
            entry: [(ctx) => console.log('🚗 停车！')],
            on: {
                TIMER: { target: 'green' }
            }
        },
        green: {
            entry: [(ctx) => console.log('🚗 通行！')],
            on: {
                TIMER: { target: 'yellow' }
            }
        },
        yellow: {
            entry: [(ctx, e) => { ctx.cycleCount++ }],
            on: {
                TIMER: {
                    target: 'red',
                    guard: (ctx) => ctx.cycleCount < 5,
                    // 循环 5 次后...（此处无匹配则停留在 yellow）
                }
            }
        }
    }
});
trafficLight.send({ type: 'TIMER' }); // red -> green
trafficLight.send({ type: 'TIMER' }); // green -> yellow
trafficLight.send({ type: 'TIMER' }); // yellow -> red
// ...循环往复