声明式编程与函数式编程_声明式编程如何简化您的用户界面

声明式编程与函数式编程

任何傻瓜都可以编写计算机可以理解的代码。 好的程序员编写人类可以理解的代码。 -马丁花

许多用户界面都很糟糕。 我不是在说用户体验不好或网站看起来并不好，而是在他们崩溃，锁定，误导用户，并且是维护它们的程序员的噩梦。 。

我坚信发生这种情况是因为许多开发人员正在使用命令式，事件驱动的编程方法，该方法导致代码中充满大量复杂的条件逻辑。 如果可以某种方式减少条件行为的数量，则代码将变得更易于掌握，测试和维护。

基于说明性示例的技术可以帮助实现这一目标。

强制性的，事件驱动的编程有什么问题？

在事件驱动的编程中，您有一个UI组件来生成事件，例如输入onchange，该事件触发直接附加到该组件的动作。 组件实现决定如何对该动作做出React，从而使动作与事件紧密耦合。 基本上，这样的组件正在等待某些外部或内部事件的发生，例如按下按钮或到达数据，并且它们通过执行适当的计算来作出React。

问题的根源在于难以以清晰，易于理解，增强和测试的方式描述此行为。

这种方法有什么问题？

首先，这样的系统忽略了事件发生的上下文或当前状态，因此，它会生成大量复杂的条件逻辑，从而难以处理应用程序可能处于的所有状态。

其次，实际执行的动作由事件决定，这些事件在很大程度上是不可预测的时间和顺序，使得每次通过代码的路径都不同。

什么是声明式编程？

我认为描述声明式编程和命令式编程之间区别的更简单方法是通过现实生活中的类比。

假设您必须去公司的总部进行面试。 让我们描述一下您将如何通过每种技术到达他们的办公室。

进行采访的必要方法是：将房子存在，向右转，在第四个交通信号灯处左转，然后直行，直到到达地铁站。 乘坐1号地铁，在A站下车，从2a出口离开地铁站。 办公室就在马路对面。

声明性方法是：办公室地址是马萨诸塞州波士顿休斯顿大道23号。

此处的主要区别在于，使用声明式编程可以使步骤更加抽象。 为了到达目的地，您必须具有GPS或其他知道如何将您带到您提供的地址的方法。

总而言之，这两种编程范例之间的区别在于，使用声明式编程时，您描述了所需的结果，而没有显式列出必须执行的所有步骤，而在命令式编程中，您必须确切地描述将要执行的每个步骤。

声明式编程如何简化您的UI？

您可以使用几种声明式编程范例和库，但如今使用最多的是react ，React式编程（ rxjs ）和带有状态图的有限状态机（ xstate ）。

React

React可能是最著名的声明式库。 在React应用程序中，您只是简单地说明了在给定状态的情况下视图应该以某种方式进行显示，这种方法很少会出错。

而且，React允许我们进行声明式编程，而没有通常与该范例相关的缺点：性能。 在React中，通过虚拟DOM从我们这里抽象了DOM操作，该虚拟DOM处理了经常更改DOM的性能问题。

使用RxJs之类的库进行React式编程

我非常喜欢React式编程，这是一种声明式编程风格。 它使表达静态或动态数据流变得非常容易，而且在关联执行模型中易于表达推断出的依赖关系，从而有助于自动传播更改后的数据。

几年前开始使用新版本的angular时，我首先了解了React式编程和rxjs 。 我必须承认，一开始很难理解所有内容之间的紧密联系（因为我必须以编程的方式使用编程），但是随着时间的流逝，我有了更多的经验和知识，我开始真正地看到了好处。

我的意思是，从不同的来源（例如搜索输入，服务器数据，路由数据等）创建数据流，然后将这些流与其他流组合在一起，这些流最终将在任何给定时刻用于创建UI状态，这有多棒？ 我告诉你，太神奇了！！！ 并使您的代码真的非常非常容易推理。

使用像XState这样的库的有限状态机

状态机是开发健壮的UI的最有效方法之一。 我们的应用程序具有许多可能处于的状态。我们通常会处理诸如加载，成功甚至失败之类的状态。 那我们的应用程序可以处于其他状态呢？

想象一下，如果您的状态中有五个布尔值（大约120个），则可以拥有的组合数量。疯狂吧？ 除此之外，我们的应用程序甚至不应处于这120种可能的状态中的许多状态。

所有这些状态问题都可以通过使用状态机来解决。 状态机鼓励您计划状态，声明所有可能的状态以及所有可能的转换，以消除不可能的状态并减少总状态数。

外卖

由于以下原因，使用声明式编程可以更轻松地对一段代码进行推理：

• 您不必担心的代码更少。 因此，出错的地方更少了。
• 您指定应该发生什么而不是应该如何发生。
• 以编程方式进行测试更容易。
• 它会迫使您在直接进入编码之前进行一些规划。

先前发布在 https://codemachine.dev/how-you-can-simplify-your-ui-code-through-declarative-programming

翻译自: https://hackernoon.com/how-can-declarative-programming-simplify-your-user-interface-8b1i3udy

声明式编程与函数式编程