XState是一個(gè)狀態(tài)管理的庫(kù)

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

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

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

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

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

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

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

未登錄 --> 登錄 ：存儲(chǔ)用戶(hù)數(shù)據(jù)（動(dòng)作）

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

為何選擇他 乍看之下，你可能會(huì)覺(jué)得數(shù)據(jù)管理變得更加復(fù)雜了，因?yàn)橹拔抑粚⒅匦姆旁跀?shù)據(jù)上，并沒(méi)有引入狀態(tài)的概念。

其實(shí)引入狀態(tài)之后，整個(gè)系統(tǒng)的邏輯就會(huì)更加清晰。因?yàn)檫@些狀態(tài)都是有限的，所以系統(tǒng)的流程也變得有限。

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

總結(jié)：

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

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

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

有限狀態(tài)機(jī)

XState 整個(gè)核心源自于StateCharts

也就是說(shuō)我們需要定義好整個(gè)程序會(huì)有哪些狀態(tài)，和每個(gè)狀態(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'});