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 就必须再运行一次 b = a + 1
来同步 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
这时假想我们有一个新的算子符号 <=
来永久联系 b 和 a 的关系,我们可以和上面的函数一样可以不用每次去手动更新 b ,例如
let a = 1;
let b <= a + 1;
console.log(b) // 输出 2
a = 11;
console.log(b) // 输出 12
假想 let b <= a + 1
这句申明把 b 等于 a + 1 永久联系了起来,每次 a 变化,b 就自动跟随变化,所以最后的输出是 12。
然后我们再更进一步,实现 异步。如果我们实现让 a = 11
这句代码之前引用到的 b 也会变为 12 的话就跟前面的函数不一样了。在下面例子里我们把 console.log 换为 HTML 界面,因为 console.log 输出的打印是一次性的,而界面可以更新。
let a = 1;
let b <= a + 1;
...
{ b }
//开始是2, 等 a=11 之后自动更新显示为 12,这就是异步
...
a = 11;
...
{ b }
//12
...
这样 <=
这个算子才算是真正的 Reactive Programming 反应式编程,所有使用到 b 的地方都会 自动异步更新。我们无需再写代码去维护数据的最新状态。不用程序员再去维护对应的更新,一切都是自动反应 reactive。
Functional 函数化
一般情况下,简单的一个表达式 a + 1
可能解决不了问题,我们可能需要下面这样的函数来组织代码
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 的异步特性。如果我们有类似之前提到的 <=
自动异步更新算子一样的函数,假如叫 reactiveFunction,这个函数也可以把 b 和 a 的变化建立起永久的联系,例如
let a = 1;
let b = reactiveFunction(){
if (a >= 0)
return a + 1;
else
return a - 1;
}
...
{ b }
//开始是2, 等 a=30 之后自动更新显示为 31, a=-40 后变为 -41
...
a = 30
...
{ b }
//开始是 31, 之后自动更新显示为 -41
...
a = -40
...
{ b }
// -41
...
这里 reactiveFunction 这个特殊函数在每次 a 变化时会自动再次运行去更新 b,每次使用 b 都是根据 a 生成的最新数据,更重要的是,之前引用到 b 的地方也会跟着异步更新。这样我们就有了 FRP - Functional Reactive Programming。这个 reactiveFunction 函数是这里的关键,它通常是由底层的框架使用异步事件信号实现,应用开发者就不用再写额外代码去跟踪数据的每次更新了,这在异步编程里可以极大的简化代码,减少 bug 的出现率。
小结
FRP 是 1997 年提出的概念,有很多种解释,我们这里谈论的是在浏览器里实现界面更新的 FRP,背后的简单原理就是观察者模式 observer pattern,观察者订阅数据,收到数据的更新事件后完成数据的 自动异步更新 。
相关阅读:
https://gist.github.com/staltz/868e7e9bc2a7b8c1f754