XState是一个状态管理的库

XState是一个状态管理的库，用来描述、控制各种状态。

脑海中浮现了Redux和Vuex，他们也是状态管理的库，通过公用上下文去维护数据。和这些库不一样的是，Xstate着重点在于管理状态，通过状态转换去维护数据。

因何产生之前的状态管理库，不能算真正的状态管理库。

比如Vuex，我们习惯称他为状态管理器，其实他只是提供了一个全局上下文去统一管理数据，这个库并没有涉及到数据的状态，比如登录、未登录、退出等。

Xstate则为数据处理提供了新的思路，他以不同的状态为切入点，通过状态切换去处理数据。

比如用户有登录、未登录状态，我们定义好了有限的状态，然后在这些状态里增加转换的动作：

未登录 --> 登录：存储用户数据（动作）

这下子，状态的转换成了整个系统的触发器，我们只要围绕不同状态进行数据管理就行了。

为何选择他乍看之下，你可能会觉得数据管理变得更加复杂了，因为之前我只将重心放在数据上，并没有引入状态的概念。

其实引入状态之后，整个系统的逻辑就会更加清晰。因为这些状态都是有限的，所以系统的流程也变得有限。

有限的流程就会有更加清晰的交互，我们能准确知道在哪个流程需要怎么样的数据，同时也便于前端和设计师或产品经理进行交流，后期的测试也变得更加容易了。更令人欣喜的是，Xstate还可以转换成流程图。

总结：

1、XState是一个状态管理的库，用来描述、控制各种状态。

2、Xstate以不同的状态为切入点，通过状态切换去处理数据。

3、XState 提供的图形化工具可以把程序转换为图片。

有限状态机

XState 整个核心源自于StateCharts

也就是说我们需要定义好整个程序会有哪些状态，和每个状态能转换到哪种状态以及如何转换。

安装 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'});

XState是一个状态管理的库相关推荐

uvex快速入门 Vue.js 应用程序开发的状态管理模式 + 库
参考视频 vue参考文档 VueX 大型项目管理公共数据的工具作用: 独立与组件系统之外的,状态管理工具,采用集中式存储管理所有的组件状态,解决多组件数据通信(跨组件通信 A组件修改数据其他组件都 ...
Vue3状态管理库——Pinia
什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享. pinia 与 vuex 的区别: 更友好的TypeScript支持,Vuex之前对 ...
Vue状态管理--Pinia使用详解
一.Pinia概述 Pinia开始于大概2019年,最初作为一个实验为Vue重新设计状态管理,让它用起来像组合API. Pinia本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享(这点和Vu ...
Vue3 之 Pinia - 状态管理
目录一.概念 1. Pinia => Pinia 2. Pinia和Vuex的对比 01 - 不是已经有Vuex了吗?为什么还要用Pinia 02 - 和Vuex相比,Pinia有很多的优势 ...
极简Vue3教程--Pinia状态管理
Pinia(发音为/piːnjʌ/,如英语中的"peenya")是最接近piña(西班牙语中的菠萝)的词:Pinia开始于大概2019年,最初是作为一个实验为Vue重新设计状态管理 ...
[译] SpaceAce 了解一下，一个新的前端状态管理库
原文地址:Introducing SpaceAce, a new kind of front-end state library 原文作者:Jon Abrams 译文出自:掘金翻译计划本文永久链接: ...
教你写一个 React 状态管理库
自从 React Hooks 推行后,Redux 作为状态管理方案就显得格格不入了.Dan Abramov 很早就提到过 "You might not need Redux",开发 ...
灵魂拷问：我们该如何写一个适合自己的状态管理库？
作者|李骏(涅尘) 来源|尔达Erda公众号引言大家好,这里是 Erda 开源项目前端技术团队,今天聊一聊前端的状态管理. 说到状态管理库,想必前端同学随口都能说出好几个来,社区里的轮子一个接 ...
技术期刊 · 吾令凤鸟飞腾兮 | 使用 esbuild 加速 webpack；网易云的熟人社交玩法；状态管理利器 XState；TypeScript 是如何工作的；深入浅出 V8 引擎
蒲公英 · JELLY技术期刊 Vol.44 生命不息,学习无止,这是很多人一以贯之的追求,虽然在很多领域中,知识是无法穷尽的,但每一点细小的改变都能让自己可以更进一步,就好像离骚中所述," ...

XState是一个状态管理的库

有限状态机

XState是一个状态管理的库相关推荐

最新文章

热门文章