什么是有限状态机

有限状态机，finite state machine 缩写FSM ，一种数学模型和计算机科学概念，用于描述对象在计算过程中的状态转换。它由一组状态、一组可触发的事件以及状态转移规则组成。

主要组成部分：

1. 状态（States）：状态是对象在某一时间点所处的特定条件或情况。在有限状态机中，状态是有限的。
2. 事件（Events）：事件是导致状态转换发生的外部触发器。
3. 转移规则（Transitions）：转移规则定义了在特定状态下触发特定事件后对象应该从一个状态转移到另一个状态。

有限状态机-红绿灯🚥

如图，便是一个典型的有限状态机。在一个交通灯控制系统中，
状态：绿灯、黄灯、红灯就是三个可能的状态。
事件：定时器触发的“时间到了”可以是一个事件。
转移规则：从绿灯到黄灯的转移规则可以是，当定时器触发 “时间到了”事件，绿灯转移到黄灯。

框架 - Nodejs中的有限状态机

在 Node.js 环境中，实现状态机管理的开源库有几个选择。以下是几个示例

1. XState

XState 是一个非常强大的 JavaScript 库，适用于创建状态机和状态图。它不仅支持纯 JavaScript 环境，也可用于任何使用 JavaScript 的框架中，如 React、Vue、Angular 或 Node.js。

• 特点：

  • 支持有限状态机和分层状态机。
  • 可以序列化和可视化状态机。
  • 支持历史状态、并行状态、活动状态等复杂功能。
  • 强大的开发者工具支持，包括状态机可视化工具。

• 安装：

  npm install xstate
  

• 示例：

  const { Machine, interpret } = require('xstate');
  
  const toggleMachine = Machine({
    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');
  
  

2. Robot

Robot 是一个轻量级的函数式库，用于创建状态机。它的特点是非常小巧（压缩后仅 1kB），适合需要关注包大小的应用。

• 特点：

  • 极简的 API 设计。
  • 无依赖，体积小。
  • 支持异步状态机。

• 安装：

  npm install robot3
  

• 示例：

  const { createMachine, interpret } = require('robot3');
  
  const machine = createMachine({
    green: { TIMER: 'yellow' },
    yellow: { TIMER: 'red' },
    red: { TIMER: 'green' },
  });
  
  const service = interpret(machine, () => {
    console.log(service.machine.current);
  });
  
  service.send('TIMER');
  service.send('TIMER');
  service.send('TIMER');
  
  

3. Stent

Stent 是结合了 Redux 和状态机概念的 JavaScript 库，它通过使用中间件的方式使得状态管理更加直观和强大。

• 特点：

  • 结合了状态机和 Redux 的概念。
  • 支持与 React、Angular、Vue 等流行框架集成。
  • 提供了一种类似于 Redux 的中间件机制。

• 安装：

  npm install stent
  

• 示例：

  const { Machine, connect } = require('stent');
  
  const machine = Machine.create('trafficLight', {
    state: { color: 'green' },
    transitions: {
      'green': { TIMER: 'yellow' },
      'yellow': { TIMER: 'red' },
      'red': { TIMER: 'green' }
    }
  });
  
  function logState() {
    console.log(machine.state);
  }
  
  connect(machine).with(logState);
  machine.dispatch('TIMER');
  
  

对比小结

	XState	robot3	Stent
Github Star⭐️	26k	1.9k	<1k
特点	功能全面，灵活，适合复杂场景	功能简洁，体积小	无明显特点
问题	无明显问题	功能较少	已多年未更新，停止维护了，类似还有javaScript-state-machine

综合来看，选择有限状态机框架，需要功能强 ，可以考虑XState，小而简单，可以考虑robot3.