当前位置：首页 > news >正文

XState

news 2025/8/28 8:21:36

下面，我们来系统的梳理关于 XState：React 状态管理的新范式 的基本知识点：

一、XState 核心概念

1.1 什么是状态机？

状态机是一个数学模型，用于描述系统在有限数量的状态之间转换的行为。XState 是基于状态机和状态图的 JavaScript/TypeScript 库。

1.2 为什么需要 XState？

可预测性：明确的状态转换
可视化：状态图可图形化表示
可维护性：集中状态逻辑
可测试性：容易编写测试用例
协作性：设计师和开发者共享同一状态图

1.3 核心概念对比

概念	传统状态管理	XState
状态定义	分散的变量	集中的状态机
状态转换	手动设置	声明式转换
副作用	分散处理	集中管理
可视化	困难	内置支持
复杂度	随应用增长	可管理

二、基础概念与术语

2.1 状态机组成要素

interface StateMachine {id: string;          // 状态机标识initial: string;     // 初始状态states: {            // 状态定义[key: string]: {on: {            // 事件转换[event: string]: string | { target: string; actions?: any }};activities?: any; // 活动invoke?: any;     // 调用服务};};
}

2.2 关键术语

State（状态）：系统在特定时刻的状况
Event（事件）：触发状态转换的动作
Transition（转换）：状态之间的变化
Action（动作）：状态转换时执行的操作
Guard（守卫）：条件性转换的条件
Context（上下文）：状态机的数据存储
Service（服务）：外部交互或副作用

三、安装与基础使用

3.1 安装

npm install xstate @xstate/react
# 或
yarn add xstate @xstate/react

3.2 基础状态机示例

import { createMachine, interpret } from 'xstate';// 定义状态机
const toggleMachine = createMachine({id: 'toggle',initial: 'inactive',states: {inactive: {on: { TOGGLE: 'active' }},active: {on: { TOGGLE: 'inactive' }}}
});// 使用状态机
const toggleService = interpret(toggleMachine).onTransition(state => console.log(state.value)).start();toggleService.send('TOGGLE'); // 输出: 'active'
toggleService.send('TOGGLE'); // 输出: 'inactive'

四、React 集成

4.1 使用 useMachine Hook

import { useMachine } from '@xstate/react';
import { toggleMachine } from './toggleMachine';function ToggleComponent() {const [state, send] = useMachine(toggleMachine);return (<div><p>状态: {state.value}</p><button onClick={() => send('TOGGLE')}>{state.value === 'inactive' ? '激活' : '禁用'}</button></div>);
}

4.2 带上下文的状态机

const counterMachine = createMachine({id: 'counter',initial: 'active',context: {count: 0},states: {active: {on: {INCREMENT: {actions: assign({ count: ctx => ctx.count + 1 })},DECREMENT: {actions: assign({ count: ctx => ctx.count - 1 })},RESET: {actions: assign({ count: 0 })}}}}
});function Counter() {const [state, send] = useMachine(counterMachine);return (<div><p>计数: {state.context.count}</p><button onClick={() => send('INCREMENT')}>+</button><button onClick={() => send('DECREMENT')}>-</button><button onClick={() => send('RESET')}>重置</button></div>);
}

五、高级状态机模式

5.1 分层状态机

const paymentMachine = createMachine({id: 'payment',initial: 'methods',states: {methods: {on: { SELECT_METHOD: 'processing' }},processing: {on: {SUCCESS: 'success',FAILURE: 'failure'}},success: { type: 'final' },failure: {on: { RETRY: 'methods' }}}
});

5.2 并行状态机

const formMachine = createMachine({type: 'parallel',states: {validation: {initial: 'valid',states: {valid: { on: { INVALIDATE: 'invalid' } },invalid: { on: { VALIDATE: 'valid' } }}},submission: {initial: 'idle',states: {idle: { on: { SUBMIT: 'submitting' } },submitting: { on: { SUCCESS: 'success', ERROR: 'error' } },success: { type: 'final' },error: { on: { RETRY: 'idle' } }}}}
});

5.3 带守卫的转换

const authMachine = createMachine({id: 'auth',initial: 'checking',context: {user: null,error: null},states: {checking: {invoke: {src: 'checkAuth',onDone: { target: 'authenticated', actions: 'setUser' },onError: { target: 'unauthenticated', actions: 'setError' }}},authenticated: {on: { LOGOUT: 'unauthenticated' }},unauthenticated: {on: {LOGIN: {target: 'authenticated',cond: 'isValidCredentials' // 守卫条件}}}}
}, {guards: {isValidCredentials: (ctx, event) => {return event.username && event.password;}}
});

六、副作用管理

6.1 Invoke 服务调用

const dataFetchMachine = createMachine({id: 'dataFetch',initial: 'idle',context: {data: null,error: null},states: {idle: {on: { FETCH: 'loading' }},loading: {invoke: {src: 'fetchData',onDone: {target: 'success',actions: assign({ data: (_, event) => event.data })},onError: {target: 'failure',actions: assign({ error: (_, event) => event.data })}}},success: {},failure: {on: { RETRY: 'loading' }}}
}, {services: {fetchData: async () => {const response = await fetch('/api/data');return response.json();}}
});

6.2 Actions 和 Activities

const timerMachine = createMachine({id: 'timer',initial: 'idle',context: {elapsed: 0},states: {idle: {on: { START: 'running' }},running: {activities: ['incrementTimer'], // 持续活动on: {PAUSE: 'paused',RESET: {target: 'idle',actions: 'resetTimer'}}},paused: {on: { RESUME: 'running' }}}
}, {activities: {incrementTimer: (ctx, activity) => {const interval = setInterval(() => {ctx.elapsed += 1;}, 1000);return () => clearInterval(interval);}},actions: {resetTimer: assign({ elapsed: 0 })}
});

七、可视化与调试

7.1 状态图可视化

import { createMachine } from 'xstate';
import { inspect } from '@xstate/inspect';// 启用可视化工具
inspect({iframe: false,url: 'https://stately.ai/viz?inspect'
});const machine = createMachine({// 状态机配置
});// 在浏览器中查看状态图

7.2 开发工具集成

import { useMachine } from '@xstate/react';
import { inspect } from '@xstate/inspect';if (process.env.NODE_ENV === 'development') {inspect({iframe: false});
}function App() {const [state, send] = useMachine(machine, { devTools: true });// ...
}

八、测试策略

8.1 单元测试状态机

import { interpret } from 'xstate';
import { counterMachine } from './counterMachine';describe('counterMachine', () => {it('应该正确增加计数', () => {const service = interpret(counterMachine).start();service.send('INCREMENT');expect(service.state.context.count).toBe(1);service.send('INCREMENT');expect(service.state.context.count).toBe(2);});it('应该正确重置计数', () => {const service = interpret(counterMachine).start();service.send('INCREMENT');service.send('RESET');expect(service.state.context.count).toBe(0);});
});

8.2 集成测试

import { render, screen, fireEvent } from '@testing-library/react';
import { Counter } from './Counter';test('应该渲染计数器并响应用户交互', () => {render(<Counter />);expect(screen.getByText('计数: 0')).toBeInTheDocument();fireEvent.click(screen.getByText('+'));expect(screen.getByText('计数: 1')).toBeInTheDocument();fireEvent.click(screen.getByText('-'));expect(screen.getByText('计数: 0')).toBeInTheDocument();
});

九、实战案例：购物车状态管理

9.1 购物车状态机设计

const cartMachine = createMachine({id: 'cart',initial: 'empty',context: {items: [],total: 0},states: {empty: {on: {ADD_ITEM: {target: 'hasItems',actions: 'addItem'}}},hasItems: {on: {ADD_ITEM: { actions: 'addItem' },REMOVE_ITEM: {target: 'empty',cond: 'isCartEmpty',actions: 'removeItem'},CLEAR_CART: {target: 'empty',actions: 'clearCart'},CHECKOUT: 'processing'}},processing: {invoke: {src: 'processOrder',onDone: 'success',onError: 'error'}},success: {type: 'final',entry: 'clearCart'},error: {on: {RETRY: 'processing',CANCEL: 'hasItems'}}}
}, {actions: {addItem: assign({items: (ctx, event) => [...ctx.items, event.item],total: (ctx, event) => ctx.total + event.item.price}),removeItem: assign({items: (ctx, event) => ctx.items.filter(item => item.id !== event.itemId),total: (ctx, event) => {const item = ctx.items.find(item => item.id === event.itemId);return item ? ctx.total - item.price : ctx.total;}}),clearCart: assign({ items: [], total: 0 })},guards: {isCartEmpty: (ctx) => ctx.items.length === 1 // 即将移除最后一个商品},services: {processOrder: async (ctx) => {const response = await fetch('/api/checkout', {method: 'POST',body: JSON.stringify({ items: ctx.items })});return response.json();}}
});

9.2 React 组件集成

function ShoppingCart() {const [state, send] = useMachine(cartMachine);const addItem = (item) => send('ADD_ITEM', { item });const removeItem = (itemId) => send('REMOVE_ITEM', { itemId });const checkout = () => send('CHECKOUT');return (<div><h2>购物车</h2><p>状态: {state.value}</p><p>总价: ${state.context.total}</p>{state.value === 'empty' && <p>购物车为空</p>}{state.context.items.map(item => (<div key={item.id}><span>{item.name} - ${item.price}</span><button onClick={() => removeItem(item.id)}>移除</button></div>))}<button onClick={() => addItem({ id: 1, name: '商品', price: 10 })}>添加商品</button>{state.value === 'hasItems' && (<button onClick={checkout}>结账</button>)}{state.value === 'processing' && <p>处理中...</p>}{state.value === 'error' && (<div><p>出错了</p><button onClick={() => send('RETRY')}>重试</button><button onClick={() => send('CANCEL')}>取消</button></div>)}</div>);
}

十、性能优化

10.1 状态机设计原则

保持状态机简洁：每个状态机只管理一个逻辑单元
使用上下文管理数据：避免在状态值中存储数据
合理使用并行状态：对于独立的状态维度
适当使用守卫：条件性状态转换

10.2 React 性能优化

// 使用 useMachine 的第二个参数进行优化
const [state, send] = useMachine(cartMachine, {actions: {// 动态注入 actions},services: {// 动态注入 services},guards: {// 动态注入 guards}
});// 使用 useSelector 避免不必要的重渲染
import { useSelector } from '@xstate/react';function CartTotal() {const total = useSelector(cartService, state => state.context.total);return <p>总价: ${total}</p>;
}// 使用 useActor 对于 actor 模型
const [state, send] = useActor(cartActor);

10.3 代码组织实践

src/machines/cart/index.ts          # 状态机定义types.ts          # 类型定义actions.ts        # 动作实现services.ts       # 服务实现guards.ts         # 守卫实现test.ts           # 测试文件auth/index.tstypes.ts...

十一、与其它状态管理库集成

11.1 与 Redux 集成

import { createStore } from 'redux';
import { interpret } from 'xstate';// 创建状态机
const machine = createMachine(/* ... */);// 创建 Redux store
const store = createStore(/* ... */);// 状态机服务
const service = interpret(machine).onTransition(state => {// 将状态机状态同步到 Reduxstore.dispatch({type: 'STATE_MACHINE_UPDATE',payload: state});
}).start();

11.2 与 React Context 集成

import React from 'react';
import { useMachine } from '@xstate/react';const CartContext = React.createContext();function CartProvider({ children }) {const [state, send] = useMachine(cartMachine);return (<CartContext.Provider value={{ state, send }}>{children}</CartContext.Provider>);
}function useCart() {const context = React.useContext(CartContext);if (!context) {throw new Error('useCart must be used within CartProvider');}return context;
}