State是一个状态管理的库，用来描述、控制各种状态。
比如用户有登录、未登录状态，我们定义好了有限的状态，然后在这些状态里增加转换的动作：登录 --> 未登录 ：将数据清空（动作）
未登录 --> 登录 ：存储用户数据（动作）
这下子，状态的转换成了整个系统的触发器，我们只要围绕不同状态进行数据管理就行了。为何选择他
乍看之下，你可能会觉得数据管理变得更加复杂了，因为之前我只将重心放在数据上，并没有引入状态的概念。其实引入状态之后，整个系统的逻辑就会更加清晰。因为这些状态都是有限的，所以系统的流程也变得有限。
有限的流程就会有更加清晰的交互，我们能准确知道在哪个流程需要怎么样的数据，同时也便于前端和设计师或产品经理进行交流，后期的测试也变得更加容易了。更令人欣喜的是，Xstate还可以转换成流程图。
XState例子
用有限的状态（state）管理无限的数据（context）,XState为前端数据管理提供了新的解决方案。
我们来模拟一个灯光系统，颜色只能从红->黄->绿->红。
const lightMachine = Machine({
id: 'light',
initial: 'red',
context: {
retries: 0
},
states: {
red: {
on: {
CLICK: 'yellow'
}
},
yellow: {
on: {
CLICK: 'green',
}
},
green: {
on: {
CLICK: 'red',
}
},
}
});
const lightService = interpret(lightMachine).onTransition(state =>
// 状态转换的时候输出当前状态
console.log(state.value)
);然后启动机器：lightService.start()
// => red
lightService.send('CLICK');
// => yellow
lightService.send('CLICK');
// => green
lightService.send('CLICK');
// => red
可以看到，各个颜色之间的转换很清晰，能按照预期进行。
网友回复
我知道答案，我要回答
私活外包
