历史

¥History

这些 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) 的更多信息。

¥🆕 Find more about parent and child states in XState (opens new window).

历史 状态节点 是一种特殊的状态节点，当到达该节点时，它会告诉机器转到该区域的最后一个状态值。有两种类型的历史状态：

¥A history state node is a special kind of state node that, when reached, tells the machine to go to the last state value of that region. There's two types of history states:

• 'shallow'，仅指定顶层历史值，或

  ¥'shallow', which specifies only the top-level history value, or

• 'deep'，指定顶层和所有子级历史值。

  ¥'deep', which specifies the top-level and all child-level history values.

历史状态配置

¥History State Configuration

历史状态的配置与原子状态节点相同，但有一些额外的属性：

¥The configuration for a history state is the same as an atomic state node, with some extra properties:

• type: 'history' 指定这是一个历史状态节点

  ¥type: 'history' to specify that this is a history state node

• history('shallow' | 'deep') - 无论历史是浅还是深。默认为 'shallow'。

  ¥history ('shallow' | 'deep') - whether the history is shallow or deep. Defaults to 'shallow'.

• target（状态值） - 如果不存在历史记录，则为默认目标。默认为父节点的初始状态值。

  ¥target (StateValue) - the default target if no history exists. Defaults to the initial state value of the parent node.

考虑以下（人为的）状态图：

¥Consider the following (contrived) statechart:

const fanMachine = createMachine({
  id: 'fan',
  initial: 'fanOff',
  states: {
    fanOff: {
      on: {
        // transitions to history state
        POWER: { target: 'fanOn.hist' },
        HIGH_POWER: { target: 'fanOn.highPowerHist' }
      }
    },
    fanOn: {
      initial: 'first',
      states: {
        first: {
          on: {
            SWITCH: { target: 'second' }
          }
        },
        second: {
          on: {
            SWITCH: { target: 'third' }
          }
        },
        third: {},

        // shallow history state
        hist: {
          type: 'history',
          history: 'shallow' // optional; default is 'shallow'
        },

        // shallow history state with default
        highPowerHist: {
          type: 'history',
          target: 'third'
        }
      },
      on: {
        POWER: { target: 'fanOff' }
      }
    }
  }
});

在上面的机器中，事件 'POWER' 上从 'fanOff' 的转换进入 'fanOn.hist' 状态，该状态被定义为浅历史状态。这意味着机器应该转换到 'fanOn' 状态以及 'fanOn' 的先前子状态。默认情况下，如果没有历史状态，'fanOn' 将进入其初始状态 'first'。

¥In the above machine, the transition from 'fanOff' on the event 'POWER' goes to the 'fanOn.hist' state, which is defined as a shallow history state. This means that the machine should transition to the 'fanOn' state and to whichever the previous substate of 'fanOn' was. By default, 'fanOn' will go to its initial state, 'first', if there is no history state.

const firstState = fanMachine.transition(fanMachine.initialState, {
  type: 'POWER'
});
console.log(firstState.value);
// transitions to the initial state of 'fanOn' since there is no history
// => {
//   fanOn: 'first'
// }

const secondState = fanMachine.transition(firstState, { type: 'SWITCH' });
console.log(secondState.value);
// => {
//   fanOn: 'second'
// }

const thirdState = fanMachine.transition(secondState, { type: 'POWER' });
console.log(thirdState.value);
// => 'fanOff'

console.log(thirdState.history);
// => State {
//   value: { fanOn: 'second' },
//   actions: []
// }

const fourthState = fanMachine.transition(thirdState, { type: 'POWER' });
console.log(fourthState.value);
// transitions to 'fanOn.second' from history
// => {
//   fanOn: 'second'
// }

指定 target 后，如果定义历史状态的状态区域不存在历史记录，则默认情况下将进入 target 状态：

¥With a target specified, if no history exists for the state region the history state is defined in, it will go to the target state by default:

const firstState = fanMachine.transition(fanMachine.initialState, {
  type: 'HIGH_POWER'
});
console.log(firstState.value);
// transitions to the target state of 'fanOn.third' since there is no history
// => {
//   fanOn: 'third'
// }

注意

¥Notes

• 可以从 state.history 上的 State 实例直接访问历史状态，但这很少有必要。

  ¥History states can be directly accessed from State instances on state.history, but this is seldom necessary.