XState是一個狀態(tài)管理的庫

XState是一個狀態(tài)管理的庫，用來描述、控制各種狀態(tài)。

腦海中浮現(xiàn)了Redux和Vuex，他們也是狀態(tài)管理的庫，通過公用上下文去維護數(shù)據(jù)。和這些庫不一樣的是，Xstate著重點在于管理狀態(tài)，通過狀態(tài)轉(zhuǎn)換去維護數(shù)據(jù)。

因何產(chǎn)生 之前的狀態(tài)管理庫，不能算真正的狀態(tài)管理庫。

比如Vuex，我們習慣稱他為狀態(tài)管理器，其實他只是提供了一個全局上下文去統(tǒng)一管理數(shù)據(jù)，這個庫并沒有涉及到數(shù)據(jù)的狀態(tài)，比如登錄、未登錄、退出等。

Xstate則為數(shù)據(jù)處理提供了新的思路，他以不同的狀態(tài)為切入點，通過狀態(tài)切換去處理數(shù)據(jù)。

比如用戶有登錄、未登錄狀態(tài)，我們定義好了有限的狀態(tài)，然后在這些狀態(tài)里增加轉(zhuǎn)換的動作：

登錄 --> 未登錄 ：將數(shù)據(jù)清空（動作） 

未登錄 --> 登錄 ：存儲用戶數(shù)據(jù)（動作）

這下子，狀態(tài)的轉(zhuǎn)換成了整個系統(tǒng)的觸發(fā)器，我們只要圍繞不同狀態(tài)進行數(shù)據(jù)管理就行了。

為何選擇他 乍看之下，你可能會覺得數(shù)據(jù)管理變得更加復雜了，因為之前我只將重心放在數(shù)據(jù)上，并沒有引入狀態(tài)的概念。

其實引入狀態(tài)之后，整個系統(tǒng)的邏輯就會更加清晰。因為這些狀態(tài)都是有限的，所以系統(tǒng)的流程也變得有限。

有限的流程就會有更加清晰的交互，我們能準確知道在哪個流程需要怎么樣的數(shù)據(jù)，同時也便于前端和設計師或產(chǎn)品經(jīng)理進行交流，后期的測試也變得更加容易了。更令人欣喜的是，Xstate還可以轉(zhuǎn)換成流程圖。

總結(jié)：

1、XState是一個狀態(tài)管理的庫，用來描述、控制各種狀態(tài)。

2、Xstate以不同的狀態(tài)為切入點，通過狀態(tài)切換去處理數(shù)據(jù)。

3、XState 提供的圖形化工具可以把程序轉(zhuǎn)換為圖片。

有限狀態(tài)機

XState 整個核心源自于StateCharts

也就是說我們需要定義好整個程序會有哪些狀態(tài)，和每個狀態(tài)能轉(zhuǎn)換到哪種狀態(tài)以及如何轉(zhuǎn)換。

安裝 npm install xstate @xstate/react --save

import { Machine, interpret } from './xstate';const lightMachine = Machine({  id: 'toggle',  initial: 'close',  states: {      close: {          on: {CLICK: 'open'}      },      open: {          on: {CLICK: 'close'}      }  }});
const lightService = interpret(lightMachine).onTransition(state =>  console.log(state.value));
lightService.start();lightService.send({type:'CLICK'});lightService.send({type:'CLICK'});