在React中使用有限的状态机似乎是一个普通的主题。因为有限的状态机通常与前端无关。但是最近我发现了一项出色的技能,可以在复杂的React项目中在有限的状态机器中发挥作用。可以提高程序的安全性。LET在下面查看。
有限状态机,英语是有限状态机,称为FSM,有时也称为有限状态自动化。它是描述系统行为的数学计算模型,它是一种抽象的机器,它可以替换其他类型的模型,例如Turing Machines。有限的状态机由给定对象的所有可能状态和它们之间的转换。C.c.com用图灵机比较,其计算能力很低。此计算能力之间的差异意味着FSM的计算能力更有限,更有限,因为它的状态数量有限。如果它不是很好,那是无限的状态机器。更重要的是,状态机的规则是:它仅在任何时候处于一个状态。由于有限的状态机会根据适当的组合或预先确定生成某些动作时间顺序,我们可以在现代社会的任何地方找到有限状态机的阴影。这些包括自动自动售货机,电梯甚至交通信号灯。
交通信号灯的一个完美匹配的有限状态机器的一个示例。LET分析交通信号灯的工作方式:它具有四个状态:
它有四个国家转换:
我们可以看到我们的状态和州转换数量有限。此外,交通信号灯只能在任何时候处于一个状态。这意味着我们在这里处理有限的状态机器。更重要的是,通过实现实现一台有限的状态机器,我们可以保证该模型不会引起事故。举例来说,交通信号灯将永远不会直接从绿灯变为红灯。
实际上,有很多关系。尤其是对于游戏开发,许多游戏将使用大量有限的州机器。例如,每个人都应该玩过这款超级马里奥的2D游戏。站着,向右走,向左走,跳,跳。从代码的角度来看,它与操纵杆事件相对应。
const views = [,,];
const initialTep = step.Account
最后,组件本身:
所有这些似乎正常,表单可以切换到下一个和上一个步骤。,也就是说,2或小于0。如果您想修复它,我们将编写以下代码:
该代码确实没有问题,但是仍然存在一些潜在的风险。在软件开发中,您对整个项目负责的情况很少。一般来说,整个团队都在合作,这意味着许多其他开发人员会检查您的代码,您会理解并理解它,您将理解并理解ITIT可能会修改它。我们假设有人在顶部写了一种方法表格,直接跳到第三步。
这是一本很好的负面教科书,第三步不存在于我们的形式中。另一个例子是:
此代码中有什么问题吗?如果在给定的顺序中需要所有步骤,为什么有人会跳过一步?这是最后一个示例:
这些错误的任何投资都可能在以下情况下发生:
也许这不是一个大问题,但是您需要知道我的示例是一个非常简单的过程。如果我们定义了可能在一个地方发生的状态和状态之间的过渡,这会更容易吗?类似于某个协议,我们可以轻松地查看其中的整个逻辑,并确保没有其他商定的事情。实现此模型的是有限的状态机。
首先,让我们首先注意Onnext和Onprevious功能。我们想制作一台机器,我们使用下面的状态和事件来描述其行为,即为该机器的特性设计模型。
实现如下:
让我们立即分析此代码。造emachine方法接受由ID,初始和状态组成的对象。这三个词的功能是:
接下来,让我们分析董事状况:
const视图= [
,我不应该在那里!视图数组中的元素。如何在我们有限的状态计算机中实现这一目标?让我们首先更改上下文。步骤:数字;}导出类型上下文= {currentView:view;}
最后,将一些类型添加到我们有限的状态机器中,然后将类型和操作移动到不同的文件中。现在我们的代码如下:formmachine.types.ts.ts
formmachine.actions.ts
formmachine.ts
app.tsx
您可能会说:“它看起来仍然很复杂。”但是请记住,如果您正在为一家大公司开发一个非常重要的项目,那么其中一个很小的错误可能会导致非常严重的资本损失。我总结了使用的几个优势有限的状态机:
原始:https://juejin.cn/post/709966666477208305671