# 最终状态

¥Final states

这些 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 final states in XState (opens new window) as well as a no-code introduction to final states (opens new window).

在状态图中，你可以将状态声明为最终状态。最终状态表明其父状态是“完成”。要了解更多信息，请阅读状态图简介中的最终状态部分。

¥In statecharts, you can declare a state as a final state. The final state indicates that its parent state is “done”. To learn more, read the final state section in our introduction to statecharts.

# API

要指示状态节点是最终状态，请将其 type 属性设置为 'final'：

¥To indicate that a state node is final, set its type property to 'final':

const lightMachine = createMachine({
  id: 'light',
  initial: 'green',
  states: {
    green: {
      on: {
        TIMER: { target: 'yellow' }
      }
    },
    yellow: {
      on: {
        TIMER: { target: 'red' }
      }
    },
    red: {
      type: 'parallel',
      states: {
        crosswalkNorth: {
          initial: 'walk',
          states: {
            walk: {
              on: {
                PED_WAIT: { target: 'wait' }
              }
            },
            wait: {
              on: {
                PED_STOP: { target: 'stop' }
              }
            },
            stop: {
              // 'stop' is a final state node for 'crosswalkNorth'
              type: 'final'
            }
          },
          onDone: {
            actions: 'stopCrosswalkNorth'
          }
        },
        crosswalkEast: {
          initial: 'walk',
          states: {
            walk: {
              on: {
                PED_WAIT: { target: 'wait' }
              }
            },
            wait: {
              on: {
                PED_STOP: { target: 'stop' }
              }
            },
            stop: {
              // 'stop' is a final state node for 'crosswalkEast'
              type: 'final'
            }
          },
          onDone: {
            actions: 'stopCrosswalkEast'
          }
        }
      },
      onDone: 'green'
    }
  }
});

在复合状态中，到达最终子状态节点（带有 { type: 'final' }）将在内部引发该复合状态节点（例如 "done.state.light.crosswalkEast"）的 done(...) 事件。使用 onDone 相当于为该事件定义一个转换。

¥In a compound state, reaching a final child state node (with { type: 'final' }) will internally raise a done(...) event for that compound state node (e.g., "done.state.light.crosswalkEast"). Using onDone is equivalent to defining a transition for this event.

# 并行状态

¥Parallel states

当并行状态节点中的每个子状态节点完成时，父并行状态节点也完成。当到达每个子复合节点中的每个最终状态节点时，将为并行状态节点引发 done(...) 事件。

¥When every child state node in a parallel state node is done, the parent parallel state node is also done. When every final state node in every child compound node is reached, the done(...) event will be raised for the parallel state node.

这对于并行任务建模非常有用。例如，下面有一个购物机，其中 user 和 items 代表 cart 状态的两个并行任务：

¥This is very useful in modeling parallel tasks. For example, below there is a shopping machine where user and items represent two parallel tasks of the cart state:

const shoppingMachine = createMachine({
  id: 'shopping',
  initial: 'cart',
  states: {
    cart: {
      type: 'parallel',
      states: {
        user: {
          initial: 'pending',
          states: {
            pending: {
              entry: 'getUser',
              on: {
                RESOLVE_USER: { target: 'success' },
                REJECT_USER: { target: 'failure' }
              }
            },
            success: { type: 'final' },
            failure: {}
          }
        },
        items: {
          initial: 'pending',
          states: {
            pending: {
              entry: 'getItems',
              on: {
                RESOLVE_ITEMS: { target: 'success' },
                REJECT_ITEMS: { target: 'failure' }
              }
            },
            success: { type: 'final' },
            failure: {}
          }
        }
      },
      onDone: 'confirm'
    },
    confirm: {
      // ...
    }
  }
});

仅当 'cart' 的所有子状态（例如 'user' 和 'items'）都处于其最终状态时，才会发生 onDone 转换。以购物机为例，一旦到达 'cart.user.success' 和 'cart.items.success' 状态节点，机器将从 'cart' 状态转换到 'confirm' 状态。

¥The onDone transition will only take place when all of the child states of 'cart' (e.g., 'user' and 'items') are in their final states. In the case of the shopping machine, once the 'cart.user.success' and 'cart.items.success' state nodes are reached, the machine will transition from the 'cart' to the 'confirm' state.

警告

无法在机器的根节点上定义 onDone 转换。这是因为 onDone 是 'done.state.*' 事件的转换，当机器到达其最终状态时，它无法再接受任何事件。

¥The onDone transition cannot be defined on the root node of the machine. This is because onDone is a transition on a 'done.state.*' event, and when a machine reaches its final state, it can no longer accept any events.

# 注意

¥Notes

最终状态节点仅指示其直接父节点已完成。它不会影响任何更高父级的完成状态，除非并行状态节点在其所有子复合状态节点完成时完成。

¥A final state node only indicates that its immediate parent is done. It does not affect the done status of any higher parents, except with parallel state nodes which are done when all of its child compound state nodes are done.
到达最终子状态的并行状态不会停止接收事件，直到其所有同级状态完成为止。最终子状态仍然可以通过事件退出。

¥A parallel state that reaches a final substate does not stop receiving events until all its siblings are done. The final substate can still be exited with an event.
最终状态节点不能有任何子节点。它们是原子状态节点。

¥Final state nodes cannot have any children. They are atomic state nodes.
你可以在最终状态节点上指定 entry 和 exit 操作。

¥You can specify entry and exit actions on final state nodes.
达到顶层最终状态后，解释机将停止。

¥Upon reaching a top-level final state, the interpreted machine will stop.

← 并行状态节点副作用 →