什么是 FRP - Functional Reactive Pr

TL; DR
Reactive Programming 就是使用函数来达到 数据 的 自动异步更新
Reactive Programming 有的翻译为响应式编程，有的翻译为反应式编程，这里翻译为 反应式编程

FRP - Functional Reactive Programming 函数反应式编程是一种编程 paradigm 范例，主要是通过 functional programming 函数式编程的函数为基本模块来实现反应式编程 reactive programming，目的是简化编程的步骤，例如简化界面编程时数据的实时更新流程。简单来说就是 使用函数来达到数据的自动异步更新。

这里我们只讨论 FRP 的基本思想。

Reactive Programming

我们先抛开 functional 部分，看看什么是 Reactive Programming。

非 Reactive Programming

首先说说非 Reactive Programming 的情况。下面这段就是普通的不带 reactive programming 特性的代码

let a = 1;
let b = a + 1;
a = 11;
b = a + 1;

可以看到，这段代码是想让 b 依赖 a 变化，每次 a 发生变化，那么要得到对应的 b 就必须再运行一次 <code>b = a + 1</code> 来同步 a 的更新。a 和 b 的关系是临时的。这样就造成 b 使用起来很麻烦并且容易出错，例如忘记同步 a 的新值再去使用 b 就会出 bug。当然我们也可以使用下面的函数来实现重新计算更新 b 的值

let a = 1;
let b = function(){
  return a + 1;
};
console.log(b) // 输出 2
a = 11;
console.log(b) // 输出 12

虽然这样使用 b 的时候不会忘记去同步 a 的更新了，但是这也还没有实现真正的 Reactive Programming，因为前面提到 Reactive Programming 的核心是 自动异步更新，上面的函数实现了 自动更新，但是没有达到 异步。

真正的 Reactive Programming

这时假想我们有一个新的算子符号 <code> <= </code> 来永久联系 b 和 a 的关系，我们可以和上面的函数一样可以不用每次去手动更新 b ，例如

let a = 1;
let b <= a + 1;
console.log(b) // 输出 2
a = 11;
console.log(b) // 输出 12

假想 <code>let b <= a + 1</code> 这句申明把 b 等于 a + 1 永久联系了起来，每次 a 变化，b 就自动跟随变化，所以最后的输出是 12。

然后我们再更进一步，实现 异步。如果我们实现让 <code>a = 11</code> 这句代码之前引用到的 b 也会变为 12 的话就跟前面的函数不一样了。在下面例子里我们把 console.log 换为 HTML 界面，因为 console.log 输出的打印是一次性的，而界面可以更新。

let a = 1;
let b <= a + 1;
...
<p> { b } </p> //开始是2， 等 a=11 之后自动更新显示为 12，这就是异步
...
a = 11;
...
<p> { b } </p> //12
...

这样 <code> <= </code> 这个算子才算是真正的 Reactive Programming 反应式编程，所有使用到 b 的地方都会 自动异步更新。我们无需再写代码去维护数据的最新状态。不用程序员再去维护对应的更新，一切都是自动反应 reactive。

Functional 函数化

一般情况下，简单的一个表达式 <code>a + 1</code> 可能解决不了问题，我们可能需要下面这样的函数来组织代码

let a = 1;
function foo(){
  if (a >= 0)
    return a + 1;
  else
    return a - 1;
}
let b = foo()

函数可以作为一种数据的处理模块来完成前面提到的 Reactive Programming 的数据计算功能。我们解决实际问题时大部分都会是以函数的形式出现，所以函数使用更加普遍。

上面的函数 foo 其实和之前的函数

let b = function(){
  return a + 1;
};

类似，所以还不具有 reactive 的异步特性。如果我们有类似之前提到的 <code> <= </code> 自动异步更新算子一样的函数，假如叫 reactiveFunction，这个函数也可以把 b 和 a 的变化建立起永久的联系，例如

let a = 1;
let b = reactiveFunction(){
  if (a >= 0)
    return a + 1;
  else
    return a - 1;
}

...
<p> { b } </p> //开始是2， 等 a=30 之后自动更新显示为 31, a=-40 后变为 -41
... 

a = 30

...
<p> { b } </p> //开始是 31, 之后自动更新显示为 -41
...

a = -40

...
<p> { b } </p> // -41
...

这里 reactiveFunction 这个特殊函数在每次 a 变化时会自动再次运行去更新 b，每次使用 b 都是根据 a 生成的最新数据，更重要的是，之前引用到 b 的地方也会跟着异步更新。这样我们就有了 FRP - Functional Reactive Programming。这个 reactiveFunction 函数是这里的关键，它通常是由底层的框架使用异步事件信号实现，应用开发者就不用再写额外代码去跟踪数据的每次更新了，这在异步编程里可以极大的简化代码，减少 bug 的出现率。

小结

FRP 是 1997 年提出的概念，有很多种解释，我们这里谈论的是在浏览器里实现界面更新的 FRP，背后的简单原理就是观察者模式 observer pattern，观察者订阅数据，收到数据的更新事件后完成数据的 自动异步更新 。

相关阅读:
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754