云图AI云图AI
X

xstate

MITTypeScript

State machines, statecharts, and actors for complex logic

30kFork 1k更新于 2026-09-14

软件介绍

XState 是一个用于 JavaScript 和 TypeScript 应用的状态管理和编排库,零依赖。它采用事件驱动编程、有限状态机、状态图和 Actor 模型,以可预测、健壮和可视化的方式处理复杂逻辑。XState 允许开发者将逻辑建模为 Actor 和状态机,提供强大且灵活的方式来管理应用和工作流状态。

核心功能

基于 Actor 的状态管理和编排
支持有限状态机、层次状态机、并行状态机和历史状态
零依赖,轻量级
与 React、Vue、Svelte、Solid 等框架集成
可视化创建和编辑状态机(Stately Studio)
TypeScript 支持,类型推断优秀
提供简单状态管理库 @xstate/store

适用场景

复杂前端应用的状态管理工作流和业务流程编排UI 组件行为建模后端服务状态管理表单逻辑和步骤引导游戏逻辑和动画控制

Docker 部署

docker run -it --rm node:20-alpine sh -c "npm install xstate && node -e \"const { createMachine, createActor } = require('xstate'); const m = createMachine({ initial: 'idle', states: { idle: { on: { START: 'running' } }, running: { on: { STOP: 'idle' } } } }); const a = createActor(m); a.subscribe(s => console.log(s.value)); a.start(); a.send({ type: 'START' }); a.send({ type: 'STOP' });\""

FAQ

XState 和 @xstate/store 有什么区别?

XState 是完整的状态机和 Actor 库,适合复杂逻辑;@xstate/store 是轻量级事件存储(<1KB),适合简单状态管理,两者可配合使用。

XState 支持哪些框架?

XState 官方提供 React、Vue、Svelte、Solid 的绑定包,也支持无框架使用。

如何可视化创建状态机?

可以使用 Stately Studio(state.new)在线可视化创建、编辑和导出状态机,支持 XState v5 格式。