分层状态节点

¥Hierarchical state nodes

这些 XState v4 文档不再维护

XState v5 现已推出！阅读有关 XState v5 的更多信息 (opens new window)

¥XState v5 is out now! Read more about XState v5 (opens new window)

🆕 了解有关 XState 中的父状态和子状态 (opens new window) 和 父状态的无代码介绍 (opens new window) 的更多信息。

¥🆕 Find more about parent and child states in XState (opens new window) as well as a no-code introduction to parent states (opens new window).

在状态图中，状态可以嵌套在其他状态中。这些嵌套状态称为复合状态。要了解更多信息，请阅读 状态图简介中的复合状态部分。

¥In statecharts, states can be nested within other states. These nested states are called compound states. To learn more, read the compound states section in our introduction to statecharts.

API

以下示例是具有嵌套状态的交通灯机器：

¥The following example is a traffic light machine with nested states:

const pedestrianStates = {
  initial: 'walk',
  states: {
    walk: {
      on: {
        PED_COUNTDOWN: { target: 'wait' }
      }
    },
    wait: {
      on: {
        PED_COUNTDOWN: { target: 'stop' }
      }
    },
    stop: {},
    blinking: {}
  }
};

const lightMachine = createMachine({
  key: 'light',
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: { target: 'yellow' }
      }
    },
    yellow: {
      on: {
        TIMER: { target: 'red' }
      }
    },
    red: {
      on: {
        TIMER: { target: 'green' }
      },
      ...pedestrianStates
    }
  },
  on: {
    POWER_OUTAGE: { target: '.red.blinking' },
    POWER_RESTORED: { target: '.red' }
  }
});

'green' 和 'yellow' 状态是简单状态 - 他们没有子状态。相反，'red' 状态是复合状态，因为它由子状态（pedestrianStates）组成。

¥The 'green' and 'yellow' states are simple states - they have no child states. In contrast, the 'red' state is a compound state since it is composed of substates (the pedestrianStates).

初始状态

¥Initial states

当进入复合状态时，其初始状态也立即进入。在以下交通灯机器示例中：

¥When a compound state is entered, its initial state is immediately entered as well. In the following traffic light machine example:

• 进入 'red' 状态

  ¥the 'red' state is entered

• 由于 'red' 的初始状态为 'walk'，因此最终进入 { red: 'walk' } 状态。

  ¥since 'red' has an initial state of 'walk', the { red: 'walk' } state is ultimately entered.

console.log(lightMachine.transition('yellow', { type: 'TIMER' }).value);
// => {
//   red: 'walk'
// }

事件

¥Events

当简单状态不处理 event 时，该 event 会传播到其要处理的父状态。在以下交通灯机器示例中：

¥When a simple state does not handle an event, that event is propagated up to its parent state to be handled. In the following traffic light machine example:

• { red: 'stop' } 状态不处理 'TIMER' 事件

  ¥the { red: 'stop' } state does not handle the 'TIMER' event

• 'TIMER' 事件被发送到处理该事件的 'red' 父状态。

  ¥the 'TIMER' event is sent to the 'red' parent state, which handles the event.

console.log(lightMachine.transition({ red: 'stop' }, { type: 'TIMER' }).value);
// => 'green'

如果一个状态或其任何祖级（父）状态都不处理事件，则不会发生转换。在 strict 模式下（在 机器配置 中指定），这会抛出错误。

¥If neither a state nor any of its ancestor (parent) states handle an event, no transition happens. In strict mode (specified in the machine configuration), this will throw an error.

console.log(lightMachine.transition('green', { type: 'UNKNOWN' }).value);
// => 'green'