在前端开发中，我们经常需要使用各种 npm 包来完成任务。今天介绍一个被广泛使用且非常好用的 npm 包——understated。
什么是 understated？
understated 是一个友好且易于使用的状态机库，可用于组织复杂的状态和状态转换。状态机是一个非常有用的概念，特别是在处理用户交互和 UI 状态方面。
安装 understated
在使用 understated 之前，需要先安装它。使用 npm 或 yarn 进行安装：
npm install --save understated # 或者 yarn add understated
创建一个简单的状态机
下面是一个基本的状态机，以便了解 understated 如何工作。该状态机设计用于控制灯的开关状态。
-- -------------------- ---- -------
------ - ------------------ - ---- --------------
----- ----------- - -
---- ------
--- -----
--
----- ------------ - -
--------- -----------
---------- ------------
--
----- ------------ - --------------------
-------- ----------------
------------ -
-
----- ----------------------
----- ----------------
--- ---------------
--
-
----- -----------------------
----- ---------------
--- ----------------
--
--
---
------ ------- -------------在上面的代码中，我们首先定义了 LightStates 和 LightActions。它们是两个对象，用于存储所有可能的状态和操作。接下来，我们使用 createStateMachine 函数创建了一个状态机。该函数接受一个配置对象，其中包含用于定义状态机行为的 initial 和 transitions 属性。
initial 属性定义了状态机的初始状态。在这个例子中，初始状态为 LightStates.OFF，表示灯处于关闭状态。
transitions 属性定义了一个数组，用于定义状态之间的转换。在这个例子中，我们定义了两个转换：POWER_ON 和 POWER_OFF。这些转换涉及从一个状态到另一个状态的更改。从 LightStates.OFF 到 LightStates.ON 的转换称为 POWER_ON 转换。反之则称为 POWER_OFF 转换。
在 React 中使用 understated
现在，我们已经了解了如何创建一个简单的状态机，接下来我们将学习如何将 understated 集成到 React 组件中。以下是一个简单的例子。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- --------------
------ ------------ ---- -----------------
-------- ------- -
----- ------------ ----------- - -------------------------
------ -
-----
--------------
---------------------------
-------------------------------------- -- -
------- ----------- -- ---------------------------------------- -----------
--
--------------------------------------- -- -
------- ----------- -- ----------------------------------------- ------------
--
------
--
-
------ ------- ------在上面的代码中，我们首先导入了 useMachine 钩子。然后，我们创建了一个 Light 组件，该组件使用了 LightMachine。在组件中，我们使用了 useMachine 钩子来管理状态机。useMachine 接受一个状态机作为参数，并返回一个数组，其中包含当前状态和转换函数 transition。
我们在组件的 render 方法中使用了当前状态 lightState.current，以及两个按钮，用于在 ON 和 OFF 状态之间切换。
总结
在本文中，我们了解了 understated 状态机库的基本用法。我们了解了如何创建一个简单的状态机，并将其集成到 React 组件中。
understated 是一个非常好用的 npm 包，特别是在处理用户交互和 UI 状态时非常有用。我们希望这篇文章能够帮助你更好地理解 understated，并在你的项目中成功应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672581e8991b448e3a02