# 历史 History
历史状态节点 是一种特殊的状态节点,当它到达时,告诉状态机转到该区域的最后一个状态值。 有两种类型的历史状态:
'shallow'
, 仅指定顶级历史值,或'deep'
, 它指定顶级和所有子级历史值。
# 历史状态配置
历史状态的配置与原子状态节点相同,但有一些额外的属性:
type: 'history'
指定这是一个历史状态节点history
('shallow' | 'deep') - 无论历史是 shallow 还是 deep 的。 默认为 'shallow'。target
(StateValue) - 如果不存在历史记录,则为默认目标。 默认为父节点的初始状态值。
考虑以下(人为的)状态图:
const fanMachine = createMachine({
id: 'fan',
initial: 'fanOff',
states: {
fanOff: {
on: {
// 转换到历史状态
POWER: { target: 'fanOn.hist' },
HIGH_POWER: { target: 'fanOn.highPowerHist' }
}
},
fanOn: {
initial: 'first',
states: {
first: {
on: {
SWITCH: { target: 'second' }
}
},
second: {
on: {
SWITCH: { target: 'third' }
}
},
third: {},
// 浅历史状态
hist: {
type: 'history',
history: 'shallow' // optional; default is 'shallow'
},
// 默认的浅历史状态
highPowerHist: {
type: 'history',
target: 'third'
}
},
on: {
POWER: { target: 'fanOff' }
}
}
}
});
在上面的状态机中,从事件 'POWER'
上的 'fanOff'
转换到 'fanOn.hist'
状态,该状态被定义为浅历史状态。 这意味着状态机应该转换到 'fanOn'
态以及 'fanOn'
的前一个子状态。 默认情况下,如果没有历史状态,'fanOn'
将进入它的初始状态,'first'
。
const firstState = fanMachine.transition(fanMachine.initialState, {
type: 'POWER'
});
console.log(firstState.value);
// 由于没有历史记录,因此转换到 'fanOn' 的初始状态
// => {
// 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);
// 从历史转换为 'fanOn.second'
// => {
// fanOn: 'second'
// }
指定了 target
后,如果定义历史状态的 state 区域不存在历史,则默认情况下它将进入 target
状态:
const firstState = fanMachine.transition(fanMachine.initialState, {
type: 'HIGH_POWER'
});
console.log(firstState.value);
// 由于没有历史记录,因此转换到 'fanOn.third' 的目标状态
// => {
// fanOn: 'third'
// }
# 注意
- 历史状态可以直接从
state.history
上的State
实例访问,但这很少是必要的。
← 延迟事件 和 转换 标识 State 节点 →