什么是状态机和状态图？

状态机帮助我们建模一个过程在事件发生时如何从一个状态转变到另一个状态。

状态机在软件开发中非常有用，因为它们帮助我们捕捉所有的状态、事件和它们之间的转换。使用状态机使得发现不可能的状态和不希望的转换变得更容易。

状态机对应用程序逻辑进行建模。下面是一个视频播放器的逻辑。当视频播放时，它会进入全屏模式。当视频停止时，它会退出全屏模式。当视频播放器处于全屏模式时，它可以是_播放中_或_暂停中_。

状态机的好处

易于理解。 状态机是可视化的，易于理解。它们是与团队和利益相关者沟通的好方法。
易于测试。 状态机是确定性的，这意味着它们易于测试。您可以测试所有可能的状态及其之间的转换。
易于实现。 状态机在任何编程语言中都易于实现。您可以使用库或自己编写。
易于维护。 状态机易于维护，因为它们易于理解、测试和实现。
它们提供了一种清晰简洁的方式来建模复杂的用户界面和管理应用程序状态。
状态机通过提供一种结构化的方式来管理状态转换和处理事件，可以帮助减少复杂性并提高可维护性。
它们还可以通过强制不同部分的应用程序之间的明确关注点分离来帮助防止错误并提高代码质量。
此外，状态机可以高度可维护，并提供一种使非常复杂的前端过程更易于管理的方法。

在后端

状态机简化了复杂工作流的设计和实现，这可以帮助减少复杂性并提高可维护性。 https://developers.redhat.com/articles/2021/11/23/how-design-state-machines-microservices

什么是状态图？

状态图扩展了传统的有限状态机，以建模更复杂的逻辑。

状态图是状态机的可视化扩展，使用方框和箭头，就像流程图和序列图一样。状态图添加了普通状态机中不可用的额外功能，包括层次结构、并发和通信。

当您在Stately Studio中创建状态机时，它也是一个状态图！

状态

状态描述了机器的状态或模式，可以像睡着和醒着一样简单。状态机一次只能处于一种状态。

狗的状态机，包含睡着和醒着的状态。醒着状态有一个警告，因为没有转换，这意味着无法到达醒着状态。

在 Stately Studio 中查看狗的状态机。

狗总是睡着或醒着。狗不能同时睡着和醒着，也不可能既不睡着也不醒着。只有这两种状态，一个精确有限的状态数量。

当状态机启动时，它首先进入初始状态。一个机器只能有一个顶级初始状态；如果有多个初始状态，机器将不知道从哪里开始！

在这个描述遛狗过程的状态图中，初始状态是等待遛狗。

XState 中的状态

在 XState 状态机中，状态在 states 属性中定义。

import { createMachine } from 'xstate';

const dogMachine = createMachine({
  id: 'dog',
  initial: 'asleep',
  states: {
    asleep: {
      // ...
    },
    awake: {
      // ...
    },
    //...
  }
});

转换和事件

狗在睡着和醒着之间的转换是通过转换实现的。事件引起转换；当事件发生时，机器转换到下一个状态。狗通过醒来和入睡事件在睡着和醒着之间转换。

转换是“确定性的”；每种状态和事件的组合总是指向相同的下一个状态。狗永远不会醒来变成睡着或入睡变成醒着。

在 Stately Studio 中查看狗的状态机及其事件和转换。

通过其两个有限状态和转换，这个小狗过程是一个_有限状态机_。状态机用于描述某物的行为。机器描述了事物的状态及其之间的转换。它是一个有限状态机，因为它有有限数量的状态。（有时缩写为 FSM，喜欢行话的人会这样称呼）。

阅读更多关于转换和事件的信息。

XState 中的事件和转换

在 XState 状态机中，事件和转换在状态的 on 属性中定义。

import { createMachine } from 'xstate';

const dogMachine = createMachine({
  id: 'dog',
  initial: 'asleep',
  states: {
    asleep: {
      on: {
        'wakes up': 'awake',
      }
    },
    awake: {
      on: {
        'falls asleep': 'asleep',
      }
    },
    //...
  }
});