前端状态机：XState 首个中文文档上线了

XState 做为一个非常好用的前端状态机库，但官网文档却只有英文版，为了阅读体验，我这里翻译了中文版。

  • 仓库地址：https://github.com/lecepin/xstate-docs-cn
  • 文档地址：https://lecepin.github.io/xstate-docs-cn/zh

由于本人水平有限，加上翻译周期较短，出现错误在所难免，欢迎广大读者批评指正。


XState
JavaScript 状态机和状态图

用于现代 Web 的 JavaScript 和 TypeScript 的 有限状态机 和 状态图 。

还不了解状态机和状态图？ 阅读我们的介绍。

📑 遵守 SCXML 规范

💬 在 Stately Discord Community 和我们交流

包

  • 🤖 xstate - 有限状态机和状态图核心库 + 解释器
  • 🔬 @xstate/fsm - 最小有限状态机库
  • 📉 @xstate/graph - XState 的图遍历实用工具包
  • ⚛️ @xstate/react - 在 React 应用中使用 XState 的 React Hooks 和实用工具包
  • 💚 @xstate/vue - 用于在 Vue 应用中使用 XState 的 Vue 组合函数和实用工具包
  • 🎷 @xstate/svelte - 用于在 Svelte 应用中使用 XState 的 Svelte 实用工具包
  • ✅ @xstate/test - 基于模型测试的实用工具包（使用 XState）
  • 🔍 @xstate/inspect - XState 的检查实用工具包

模板

首先在 CodeSandbox 上创建这些模板之一：

  • XState Template - 没有框架
  • XState + TypeScript Template - 没有框架
  • XState + React Template
  • XState + React + TypeScript Template
  • XState + Vue Template
  • XState + Vue 3 Template
  • XState + Svelte Template

超级快速上手

npm install xstate

import { createMachine, interpret } from 'xstate';// 无状态的状态机定义
// machine.transition(...) 是解释器使用的纯函数。
const toggleMachine = createMachine({id: 'toggle',initial: 'inactive',states: {inactive: {on: {TOGGLE: { target: 'active' }}},active: {on: {TOGGLE: { target: 'inactive' }}}}
});// 具有内部状态的状态机实例
const toggleService = interpret(toggleMachine).onTransition((state) => console.log(state.value)).start();
// => 'inactive'toggleService.send({ type: 'TOGGLE' });
// => 'active'toggleService.send({ type: 'TOGGLE' });
// => 'inactive'

Promise 示例

📉 在 stately.ai/viz 上查看可视化

import { createMachine, interpret, assign } from 'xstate';const fetchMachine = createMachine({id: 'Dog API',initial: 'idle',context: {dog: null},states: {idle: {on: {FETCH: { target: 'loading' }}},loading: {invoke: {id: 'fetchDog',src: (context, event) =>fetch('https://dog.ceo/api/breeds/image/random').then((data) =>data.json()),onDone: {target: 'resolved',actions: assign({dog: (_, event) => event.data})},onError: {target: 'rejected'}},on: {CANCEL: { target: 'idle' }}},rejected: {on: {FETCH: { target: 'loading' }}},resolved: {type: 'final'}}
});const dogService = interpret(fetchMachine).onTransition((state) => console.log(state.value)).start();dogService.send({ type: 'FETCH' });
  • 可视化工具
  • 为什么?
  • 有限状态机
  • 分层（嵌套）状态机
  • 并行状态机
  • 历史状态

可视化工具

在 XState Viz 中可视化、模拟和共享你的状态图！

XState Visualizer

为什么?

状态图是一种，用于对有状态的交互式系统，进行建模的方式。从单个组件到整个应用程序逻辑，这对于以声明方式描述应用的 行为 非常有用。

阅读 📽 幻灯片 (🎥 视频) 或查看这些资源以了解有限状态机和状态图在 UI 中的重要性：

  • 状态图 - 一个复杂系统的可视化表现 by David Harel
  • 状态图的世界 by Erik Mogensen
  • 纯 UI by Guillermo Rauch
  • 纯 UI 控制 by Adam Solove
  • Spectrum - 状态图社区 (对于 XState 特定问题，请使用 GitHub 讨论)

有限状态机

Light Machine 
import { createMachine } from 'xstate';const lightMachine = createMachine({id: 'light',initial: 'green',states: {green: {on: {TIMER: { target: 'yellow' }}},yellow: {on: {TIMER: { target: 'red' }}},red: {on: {TIMER: { target: 'green' }}}}
});const currentState = 'green';const nextState = lightMachine.transition(currentState, { type: 'TIMER' }).value;// => 'yellow'

分层（嵌套）状态机

Hierarchical Light Machine 
import { createMachine } from 'xstate';const pedestrianStates = {initial: 'walk',states: {walk: {on: {PED_TIMER: { target: 'wait' }}},wait: {on: {PED_TIMER: { target: 'stop' }}},stop: {}}
};const lightMachine = createMachine({id: 'light',initial: 'green',states: {green: {on: {TIMER: { target: 'yellow' }}},yellow: {on: {TIMER: { target: 'red' }}},red: {on: {TIMER: { target: 'green' }},...pedestrianStates}}
});const currentState = 'yellow';const nextState = lightMachine.transition(currentState, { type: 'TIMER' }).value;
// => {
//   red: 'walk'
// }lightMachine.transition('red.walk', { type: 'PED_TIMER' }).value;
// => {
//   red: 'wait'
// }

分层状态的对象符号：

// ...
const waitState = lightMachine.transition({ red: 'walk' },{ type: 'PED_TIMER' }
).value;// => { red: 'wait' }lightMachine.transition(waitState, { type: 'PED_TIMER' }).value;// => { red: 'stop' }lightMachine.transition({ red: 'stop' }, { type: 'TIMER' }).value;// => 'green'

并行状态机

Parallel state machine 
import { createMachine } from 'xstate';const wordMachine = createMachine({id: 'word',type: 'parallel',states: {bold: {initial: 'off',states: {on: {on: {TOGGLE_BOLD: { target: 'off' }}},off: {on: {TOGGLE_BOLD: { target: 'on' }}}}},underline: {initial: 'off',states: {on: {on: {TOGGLE_UNDERLINE: { target: 'off' }}},off: {on: {TOGGLE_UNDERLINE: { target: 'on' }}}}},italics: {initial: 'off',states: {on: {on: {TOGGLE_ITALICS: { target: 'off' }}},off: {on: {TOGGLE_ITALICS: { target: 'on' }}}}},list: {initial: 'none',states: {none: {on: {BULLETS: { target: 'bullets' },NUMBERS: { target: 'numbers' }}},bullets: {on: {NONE: { target: 'none' },NUMBERS: { target: 'numbers' }}},numbers: {on: {BULLETS: { target: 'bullets' },NONE: { target: 'none' }}}}}}
});const boldState = wordMachine.transition('bold.off', { type: 'TOGGLE_BOLD' }).value;// {
//   bold: 'on',
//   italics: 'off',
//   underline: 'off',
//   list: 'none'
// }const nextState = wordMachine.transition({bold: 'off',italics: 'off',underline: 'on',list: 'bullets'},{ type: 'TOGGLE_ITALICS' }
).value;// {
//   bold: 'off',
//   italics: 'on',
//   underline: 'on',
//   list: 'bullets'
// }

历史状态

Machine with history state 
import { createMachine } from 'xstate';const paymentMachine = createMachine({id: 'payment',initial: 'method',states: {method: {initial: 'cash',states: {cash: {on: {SWITCH_CHECK: { target: 'check' }}},check: {on: {SWITCH_CASH: { target: 'cash' }}},hist: { type: 'history' }},on: {NEXT: { target: 'review' }}},review: {on: {PREVIOUS: { target: 'method.hist' }}}}
});const checkState = paymentMachine.transition('method.cash', {type: 'SWITCH_CHECK'
});// => State {
//   value: { method: 'check' },
//   history: State { ... }
// }const reviewState = paymentMachine.transition(checkState, { type: 'NEXT' });// => State {
//   value: 'review',
//   history: State { ... }
// }const previousState = paymentMachine.transition(reviewState, {type: 'PREVIOUS'
}).value;// => { method: 'check' }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401603.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

降低前端业务复杂度新视角：状态机范式

降低前端业务复杂度新视角：状态机范式

无论做业务需求还是做平台需求的同学，随着需求的不断迭代，通常都会出现逻辑复杂、状态混乱的现象，维护和新增功能的成本也变的十分巨大，苦不堪言。下图用需求、业务代码、测试代码做对比： 图中分了 3 个阶段&#xff1…
阅读更多...
Mac 摸鱼神器

Mac 摸鱼神器

这是一个 Mac 系统的摸鱼应用，仿真了大多数的 Mac 系统黑屏故障。开启摸鱼功能后，可以给自己一段休息的时间~ 软件使用 Electron 开发，源码（欢迎 Star ⭐ ）：https://github.com/lecepin/mac-fish 1. 主界…
阅读更多...
前端状态机系列：SCXML与XState对应关系

前端状态机系列：SCXML与XState对应关系

1. 前置说明 这次再说明下自己对状态图的看法。状态图虽然有非常多的优势（参考上篇文章），如果你想使用，关于是否对整个旧项目进行全量状态图化，这里给一个适应范围是：项目中复杂的部分进行状态图建模是非常…
阅读更多...
常用注入 Script 方法

常用注入 Script 方法

1. 背景 如果你想在当前的页面，试一下某个 JS 工具库，而这个工具库恰好你没安装。（如 lodash）如果你想分享一段脚本给别人，而又不希望别人在执行的过程太过麻烦。（如你写了一段恢复复制和右键功能的脚本&a…
阅读更多...
多年前的树莓派 B+ 重新工作

多年前的树莓派 B+ 重新工作

1. 前言 最近整理房间的时候，发现在一块大约在 2014 年购买的树莓派，看了下电路板，型号是 b，看了下官网的参数： CPU: ARM1176JZF-S 核心 700MHz 单核RAM: 512MB 确实有点太弱了。 最近刚好想做一个家用的文件 Serve…
阅读更多...
create-react-app 使用代理做 mock

create-react-app 使用代理做 mock

1. 背景 很多情况下，为了测试需要一些接口的 mock 场景，基于 create-react-app 生产的项目 好处在于它内置了这块代理的能力，给用户提供了很大的方便。 2. 代理方式 create-react-app 默认提供了两种方式，关联到 webpack-dev-s…
阅读更多...
解决写文档对于图片边框的强迫症

解决写文档对于图片边框的强迫症

1. 写文档的困扰 在写文档进行配图时，很多时候图片是白色背景的，会导致文章中的图片区域附近有大量空白的感觉，强迫症患者很难受。 目前语雀做的是很好的，可以给图片加边框或者阴影，而一些文档博客平台（C…
阅读更多...
实现图片本地化 ServiceWorker + IndexedDB

实现图片本地化 ServiceWorker + IndexedDB

1. 背景 在一些安全场景，或者一些本地化的场景（如本地化的 Markdown 记事本），如果有图片上传并需要查看的场景，在不上传到服务器的情况下，实现这个效果，通常是把图片 Base64 化，但编…
阅读更多...
XState Viz 可视化和调试状态机

XState Viz 可视化和调试状态机

1. 前言 状态机的一大好处就是可以可视化状态，降低业务的理解成本和相互间的沟通成本。 目前 XState 官方提供的可视化工具已经做的很不错了，但用起来偏重，国内访问也比较慢。这边我再原基础上进行了优化，并增加了部分新功能&am…
阅读更多...
国内高速前端 Unpkg CDN 替代方案

国内高速前端 Unpkg CDN 替代方案

1. 背景 目前国内有很多 NPM 的 CDN，可以高速支持相关包文件的访问下载，如： BootCDN: www.bootcdn.cn七牛云: www.staticfile.org360: cdn.baomitu.com字节跳动: cdn.bytedance.com 但这些 CDN 并不全，很多 NPM 上的包 在这些 …
阅读更多...
小米 12S Utra 莱卡水印生成在线工具

小米 12S Utra 莱卡水印生成在线工具

前言 最近看到小米 12S Utra 的发布，看了下详情页面，发现演示的照片都好看的，包含了品牌、设备、镜头、位置等信息，如下图所示： 作为一个摄影爱好者，也希望把自己的照片也输出这些信息。 但目前此类水印…
阅读更多...
解决 Rust Tauri 1.0 构建时下载 WiX失败

解决 Rust Tauri 1.0 构建时下载 WiX失败

Rust 啥都好，就是构建太慢太慢。用我的 M1 构建 Mac 应用 10 分钟内还能拿下，但其它普通配置的就太慢了，即便用 Github Actions 大约也近 30 分钟才能构建完： 找一台高配置的 Windows 主机，结果经历了长时间的编译之后…
阅读更多...
Rust Wasm 图片转 ASCII 艺术

Rust Wasm 图片转 ASCII 艺术

有一些隐藏在代码中的 ASCII 有意思的图片，如： /*__ooOoo_o8888888o88" . "88(| -_- |)O\ /O____/---\____. \\| |// ./ \\||| : |||// \/ _||||| -:- |||||_ \| | \\\ - /| | || \_| \---// |_/ |\ .-\__ -. -__/-.…
阅读更多...
我的新书《PWA入门与实践》上市了

我的新书《PWA入门与实践》上市了

前言 我初接触PWA是在2017年年初，当时参加了一个前端分享会，其中一个主题就是与PWA相关的，介绍了PWA的Service Worker和安装到桌面的能力，以及这门技术未来的发展趋势，听完这个分享后，我就为PWA的一些能力…
阅读更多...
Linux ARM交叉编译工具链制作过程

Linux ARM交叉编译工具链制作过程

一、下载源文件 源代码文件及其版本与下载地址： Binutils-2.19.tar.bz2 http://ftp.gnu.org/gnu/binutils/ gcc-4.4.4.tar.bz2 http://mirrors.kernel.org/gnu/gcc/gcc-4.4.4/ Glibc-2.11.2.tar.bz2 Glibc-ports-2.11.tar.bz2 http://ftp.gnu.org/gnu/glibc/ Gmp-4.…
阅读更多...
数学建模之聚类模型详解

数学建模之聚类模型详解

聚类模型 引言 “物以类聚，人以群分”，所谓的聚类，就是将样本划分为由类似的对象组成的多个类的过程。聚类后，我们可以更加准确的在每个类中单独使用统计模型进行估计、分析或预测；也可以探究不同类之间的相关性和主…
阅读更多...
Unity Hub安装Android Build Support报错：Failed to delete old Unity Android Supprtinstallation files

Unity Hub安装Android Build Support报错：Failed to delete old Unity Android Supprtinstallation files

安装失败： 解决方法： 需要先安装 Android Build Support ，再安装 Android SDK & NDK Tools 和 OpenJDK 其他情况： 如果已经安装了Android SDK & NDK Tools 和 OpenJDK，只剩Android Build Support 未安装成功…
阅读更多...
红米5 Plus刷开发版/小米手机刷开发版

红米5 Plus刷开发版/小米手机刷开发版

到官网选择对应手机型号下载Rom包：MIUI下载 下载完成后手机打开：设置→我的设备→MIUI版本→右上角选择【手动选择安装包】，找到下载的包等待手机重启就行了。 PS：如果是像下面这样 小米手机找不到手动选择安装包 选项的话&#…
阅读更多...
通过Blender将PMX模型转为FBX导入Unity

通过Blender将PMX模型转为FBX导入Unity

一、下载Blender（建议2.83版本不要太高的） 官网下载网址：Blender 2.83 LTS — blender.org 二、之后安装Blender，安装后下载插件 下载地址：https://codeload.github.com/GiveMeAllYourCats/cats-blender-plugin/zip/…
阅读更多...
Git理论、原理、操作

Git理论、原理、操作

Git理论、原理、操作 Git简介： 一个开源的分布式版本控制系统。用于处理任何大大小小的项目，是一个开放源码的版本控制软件。Git与SVG的区别： 1、git是分布式的 2、git把内容按元数据方式存储，svg按文件 3、git分支和svg分支不同…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023