跳至主要内容

[note] State Chart

重要概念​

Introduction to state machines and statecharts @ XState > Guides

states​

state 會使用帶有圓角的長方形來表示狀態。狀態會是精確且有限的（precisely limited, finite number）。

  • initial state：以實心圓搭配箭頭指到的狀態，就是初始狀態。任何的過程（process）一定有初始狀態。
  • final state：以帶有外框線的圓角長方形來表示。大部分的過程都有結束狀態。
  • compound states：用一個帶有標籤的圓角長方形容器來包住許多的子狀態。在一個狀態中又包含其他狀態（子狀態，child states）。
  • atmoic states：沒有子狀態的狀態。
  • parallel states：用虛線作為容器將狀態框起來。parallel state 是一種 compound state，它內部的子狀態（又稱 region）會同時發生。

transitions​

transition 會以箭頭將兩個狀態關聯起來，這兩個狀態間的過程。表示從一個狀態轉移到另一個狀態的過渡/事件（event）

  • self-transition：事件轉換後會回到轉換前原本的那個狀態，類似做了一些什麼，但什麼也沒變。
  • delay-transition：在特定「時間」長度後，會自動轉換到下一個狀態。會使用關鍵字「after」。

actions​

actions 又稱作「effects」或「side-effects」，指的是不會影響到結果的事件（event），事件被觸發且發生後續的事情，例如，在 login 的狀態圖中執行會改變 UI 的 actions。

action 會在「進入（entry）」或「離開（exit）」狀態時觸發，或是在 transition 的過程中。

Planning statecharts​

透過繪製狀態圖，可以：

  • 列出過程中所有可能的狀態
  • 避免 bugs 和錯誤
資訊

因為狀態一定是有限的，所以稱作有限狀態機（Finite State Machine，FSM）。

Effects​

在 statecharts 中，side-effect 可以被分成兩類：

  • 射後不理（"Fire-and-forget" effects）：主要是以同步的方式執行事件

    • Actions
    • Activities

  • Invoked effects：以非同步的方式來 send 和 receive 事件

    • Promises
    • Callbacks
    • Observables
    • Machines

Giscus