Skip to content

历史状态

历史状态是一种特殊类型的状态（称为伪状态），它记住父状态退出之前最后一个活跃的子状态。当从父状态外部的转换目标是历史状态时，记住的子状态将被进入。

这允许状态机在退出和重新进入父状态时“记住”它们离开的地方。

  • 如果没有记住的子状态，历史状态将进入.target状态（如果指定了）
  • 否则，进入初始状态

历史状态将父状态返回到其最近活跃的子状态。带有H的框代表历史状态。

历史状态可以是深的或浅的：

  • 浅历史状态记住直接的子状态。
  • 深历史状态记住其子状态内最深的活跃状态或状态。
const checkoutMachine = createMachine({
  // ...
  states: {
    payment: {
      initial: 'card',
      states: {
        card: {},
        paypal: {},
        hist: { type: 'history' },
      },
    },
    address: {
      on: {
        back: {
          target: 'payment.hist',
        },
      },
    },
  },
});

浅历史状态 vs. 深历史状态​

  • 浅历史状态只记住最后一个活跃的直接子状态。
  • 深历史状态记住所有活跃的后代状态。

历史状态目标​

  • 通常，历史状态会目标其父状态的最近子状态
  • 如果进入历史状态时父状态从未被访问过，则进入父状态的初始状态。
  • 但是，你可以添加 target: 'childKey' 来指定应进入的默认子状态

历史状态速查表​

速查表：创建一个历史状态（默认是浅历史状态）​

const machine = createMachine({
  // ...
  states: {
    hist: { type: 'history' },
    firstState: {},
    someState: {},
    anotherState: {},
  },
});

速查表：创建一个深历史状态​

const machine = createMachine({
  // ...
  states: {
    hist: {
      type: 'history',
      history: 'deep',
    },
    firstState: {},
    someState: {},
    anotherState: {},
  },
});

速查表：创建一个带有目标的历史状态​

const machine = createMachine({
  // ...
  initialState: 'firstState',
  states: {
    hist: {
      type: 'history',
      target: 'someState',
    },
    firstState: {},
    someState: {},
    anotherState: {},
  },
});