反应性编程：温和的介绍
#javascript #reactive #observable

在这篇文章中，我想向您介绍反应性编程，这是好处，为什么要关心。

即使是已经使用反应性编程框架（例如：角）与此概念斗争的开发人员也是如此。
这是神秘的和复杂，通常会限制其用法。但是，RP中的编码具有非常强大的功能，显然被低估了。所以今天，我将尝试清除这个谜。

反应性编程

让我们从一个简单的定义开始：

反应性编程是与数据流有关的声明性编程范式和变化的传播。

在反应性编程中，我们将重点关注数据流，如果发生变化，则流程会自行更新。

我将用开关和灯泡说明这一点：

proactive-switch-light
图片来源：Dan Lew 1

在imperative programming中（这可能是您的主要编码方式），开关会修改灯泡的状态。在这种情况下，开关是主动，将新状态推向灯泡；灯泡是被动，只是接收命令以改变其状态。

但是，在反应性编程中，情况相反：灯泡聆听开关状态，然后相应地修改自身。在此模型中，灯泡是反应性，根据开关状态更改其状态；开关是可观察的，因为其他人可以观察其状态的变化。

reactive-switch-light
图片来源：Dan Lew 1

使用流和流程时，这种方法更有意义，因为您不必更新源（开关）即可添加更多的水槽（更多灯泡）。每个灯泡都是自我管理的，并且不依赖于开关代码的修改来自行更新。

也许您已经看过了，但是您已经熟悉这个概念：每次使用方法addEventListener时，您都在订阅事件并更新其他变量，元素等...因此，您实际上是进行反应性编程。在这里，我们将进一步推动这个概念，以创造数据，对象，来源等之间的相互作用的惊人可能性...

命令编程

现在，我们将比较命令 vs 反应性编程 2 。

让我们用简单的作业解释：a = b + c。 a被分配为b + c的结果。这是在命令编程中的即时中完成的：评估表达式，后来，可以更改b和c的值，而不会影响a的值。这就是我们大多数时候的编码方式。

另一方面，在反应式编程中，每当b或c的值更改时，a的值就会自动更新目前分配了a的值。

命令编程 

let b = 1;
let c = 2;
let a = b + c;
b = 10;
console.log(a) // 3 (not 12 because "=" is not a reactive assignment operator)

反应性编程

现在想象一下，您有一个特殊的操作员$=，它不仅在明确初始化时更改变量的值（在操作员右侧执行代码，并分配结果为左侧变量）更改操作员的右侧。

let b = 1;
let c = 2;
let a $= b + c; // 3
b = 10;
console.log(a); // 12

这样的操作员将非常有用：a将始终是最新的。我们可能会开始使用此范式来想象新的缝隙和框架，并具有相当强大的功能。

对于MVC体系结构尤其如此，其中反应性编程可以促进基础模型的变化，这些模型会自动反映在关联的视图中（通常是UI框架，例如Web应用程序的React Angular）。

）。

）

@lirx/core作为框架

最受欢迎的反应性框架是ReactiveX，它是JavaScript实现RxJS。但是，该库有以下问题：

  • 它缺乏清晰的文档（您需要一个反应性编程的主人，甚至可以理解最简单的功能），并且文档的某些部分已过时或根本不存在。
  • 它基于states（'next'，'错误'和“完整”），而不是纯数据流，它限制了许多操作员，并在构建复杂的交互时使用户感到困惑。
  • 其设计限制了其性能以及最终的捆绑包大小。

相反，我将使用@lirx/core，并向您展示实现上一个示例的简单简单：

const [$b, b$] = let$$(1);
const [$c, c$] = let$$(2);
const a$ = add$$(b$, c$); 

a$(a => console.log(a)); // 3

$b(10); // a$ => 12

我将分解代码，以详细说明每个部分：

const [$b, b$] = let$$(1);

let$$函数使我们能够创建A 可突变的反应变量。我们通常将结果分为两个常数：

您可能猜到，我们已经使用1的b初始化了。

我们重复了c的过程，现在有两个反应变量。

然后我们必须执行总和：

const a$ = add$$(b$, c$);

在这里，我们将a$声明为使用add$$函数的b$和c$的添加。所有这些变量都是可观察的。结果，如果任何b$或c$都发生了变化，那么a$也会改变。

由于a$是可观察的，因此我们必须订阅才能阅读其值（因为此值随时间变化）：

a$(a => console.log(a));

b和c已经有一个值，结果，我们会立即看到3登录。

最后，如果我们更新b写作：

$b(10);

a$将立即更改为12，并且该值将被记录。

结论

这是只是冰山一角。您可能猜到，采用反应性编程方法为您提供了非常强大的工具来设计 clear 和有组织的数据流。

流可以用作另一个流的输入。甚至多个流也可以用作另一个流的输入。您可以合并两个流。您可以过滤流以获取另一个只有您感兴趣的事件的流。您可以将数据值从一个流到另一个流映射。等。

这样，您将能够创建明确和强大的事件和数据流，并且您将拥有创建流动的工具大型应用程序非常适合您的需求。

我强烈建议您停止纯粹在命令式编程中思考，并开始练习反应性编程，以发现一个令人惊叹的新可能性。

我保证你不会后悔ð¦

关于 @lirx/core

@lirx/core 是一个反应性编程框架，具有许多prebuild功能，
清晰的文档和许多示例教您如何成为RP的大师。
它使您可以开发复杂的应用程序和管道，以轻松扩展。
而且，这是fastest and smallest
Reactive Programming的JavaScript库。
因此，这是一个很好的候选人，可以从可观察到您的旅程。

随意测试此库，分享并提供您的反馈。

  1. Dan Lew - An Introduction to Functional Reactive Programmingâ↩

  2. Wikipedia - Reactive programmingâ↩