pure function

functional programming (後面简称 FP，不是 FB)

这两个特性，很重要，我们就依这两个特性，将 pure function 的定义，转移到 pure component，在此之前，再看一些关於 pure function 的特性，它到底厉害在哪里？

老实说，这是一个我在写 C++ 时完全没有碰过的东西。之前看别的部门的人用 lambda，我那时还真看不太懂。

不过後来学 JavaScript 时，就正好碰到大 React 时代，遇到不少 FP 的狂热信仰者讨论着 FP 很多很神的特性，以及 FP 的程序设计特有的限制。

还记得 Java 吗？它是纯物件导向程序设计，用它写程序有它相对应的限制，而这样的限制伴随而来的纯粹带来了许多好处。相对的纯 FP 也是有一样的情况，要真正了解这个理论，就必须要了解一下「纯」的程序设计究竟有什麽好处，什麽限制，在此就说一下我自己所知道的部份。(可能还有其它的)

限制

• 变数宣告只有 arguments ，函数内部不宣告变数。
• function = pure function
• 写程序的过程，像是在写数学证明题一样

优点

• 不会有 side effect
• 不会有未预期的变数被修改

特色

• immutable ，不会有变数被修改，只会取代 (盖掉)。
• 函数行为可预测，只要输入改变，输出就可以预测。

pure function

在 functional programming 的世界里，有个特别的东西叫 pure function 。

在在维基百科，有到它们有两个特性，

1. 相同的输入，只会得到相同的输出。
2. 没有 side effect

回传值/引数 return value/arguments

input -> 逻辑运算 -> output

「相同的输入，只会得到相同的输出」是什麽意思呢？

以纯 FP 来说，这个 function 内部是没有变数宣告的，所以里面只有逻辑运算。有变数的地方，只有 argument，也就是说可以把所有的 pure function 变成这样的关系

arguments -> 逻辑运算 -> return value

副作用 side effective

简单的说，就是不用 arguments 和 return value 来进行资料流，或者

1. 读写档案、资料库
2. 全域变数

impure function (不 pure 的 function)

顺便来讨论一下「impure function」是什麽。

先说一个比较经典的特例，取乱数

Math.random()

这个函数是 pure 的吗？不是，因为每一次都没有输入，但是每一次的输出都不一样。
只要任何一个输出，有相同的输入，就 impure 了。

取得现在的时间也是 impure。

再看另一个例子，计数器

let count = 0;

function counter() {
  return ++count;
}

counter() // 1
counter() // 2
counter() // 3

函数 counter 和取乱数一样，没有输入输出不同。另外还有一个 impure 的特性，比取乱数更加明显，就是它有 side effect (事实上 random 是靠 side effect 取乱数的)，变数 count 对 counter 来说，是一种「全域变数」的存在。

难道纯 FP 一个无法宣告变数的环境，还会有全域变数这种 side effect 吗？有的

function counter(count = 0) {
  return () => ++count;
}

const counter0 = counter(0);

counter0() // 1
counter0() // 2
counter0() // 3

使用闭包的手法，就可以为纯 FP 的环境，储存全域变数产生 side effect，counter0 变成了 impure function，有一些语言支援 static 变数，其实就像是闭包做到的效果。

那和前端框架有什麽关系？

如果你是用 React 就可以直接明白 pure function 和 pure component 之间的关系，因为 React 的 component 有一种就是直接写个 function 做一次渲染，本身并不记录 data 的。(虽然後来有 hook 好像就都这样做)。

那 Vue.js 呢？明天我们就以 pure function 的特性，来看看 Vue.js 怎麽 pure，能有多 pure。