从Immutable.js到Redux函数式编程
作者:Youky
基本概念
函数式编程(英语:functional programming)或称函数程序设计、泛函编程,是一种编程范式。它将电脑运算视为函数运算,并且避免使用程序状态以及易变对象。其中,λ 演算为该语言最重要的基础。而且,λ 演算的函数可以接受函数作为输入参数和输出返回值。
以上是维基百科对于函数式编程的定义,用简单的话总结就是“强调以函数使用为主的软件开发风格”。
在抽象的定义之外,从实际出发,JS 的函数式编程有以下几个特点:
- 函数是一等公民
- 拥抱纯函数,拒绝副作用
- 使用不可变值
函数式编程要素
函数是一等公民
我们经常听到这句话,”在 JS 中函数是一等公民“,其具体的含义是,函数具有以下特征:
- 可以被当作参数传递给其他函数
- 可以作为另一个函数的返回值
- 可以被赋值给一个变量
函数式一等公民的特点是所有函数式编程语言所必须具有的,另一个必备特点则是支持闭包(上面的第二点其实很多时候都利用了闭包)
纯函数
有且仅有显示数据流:
- 输入:参数
- 输出:返回值
一个函数要是纯函数,要符合以下几点:
函数内部不能有副作用
对于同样的输入(参数),必定得到同样的输出。
这意味着纯函数不能依赖外部作用域的变量
副作用
参考纯函数“仅有显示数据流”的定义,副作用的定义即拥有“隐式数据流”。或者说:
- 会对函数作用域之外的执行上下文、宿主环境产生影响,如修改全局变量
- 依赖了隐式输入,如使用全局变量
- 进行了与外界的隐式数据交换,如网络请求
不可变值
当函数参数为引用类型时,对参数的改变将作用将映射到其本身。
const arr = [1, 2, 3]; const reverse = (arr) => { arr.reverse(); }; reverse(arr); console.log(arr); // [3,2,1]
这种操作符合“副作用”的定义:修改了外部变量。破坏了纯函数的显示数据流。
如果真的需要设计对数据的修改,则应该:
- 拷贝原始数据
- 修改拷贝结果,返回新的数据
const reverse = (arr) => { const temp = JSON.parse(JSON.stringify(arr)); return temp.reverse(); }; arr = reverse(arr);
拷贝带来的问题
通过拷贝实现对外部数据的只读直观且简单,代价则是性能。
对于一个大对象,每次的修改可能只是其中的一个属性,那么每次的拷贝会带来大量的冗余操作。当数据规模大,操作频率高时,会带来严重的性能问题。
解决拷贝的性能问题: 持久化数据结构
拷贝模式的问题根源在于:一个大对象只有一小部分有改变,却要对整个对象做拷贝。
这个情况其实和另一个场景很相似,就是 Git。一个项目有很多文件,但我一次可能只修改了其中一个。那么我本次的提交记录是怎样的呢?其处理逻辑就是:将改变部分和不变部分进行分离。
**Git 快照保存文件索引,而不会保存文件本身。变化的文件将拥有新的存储空间+新的索引,不变的文件将永远呆在原地。**而在持久化数据结构中,则是变化的属性的索引,和不变的属性的索引
持久化数据结构最常用的库是 Immutable.js,其详解见下文。
JS 中三种编程范式
JS 是一种多范式语言,而从前端的发展历史来看,各时段的主流框架,也正对应了三种编程范式:
- JQuery:命令式编程
- React 类组件:面向对象
- React Hooks、 Vue3:函数式编程
函数式编程的优缺点
优点
- 利于更好的代码组织。因为纯函数不依赖于上下文所以天然具有高内聚低耦合的特点
- 利于逻辑复用。纯函数的执行是与上下文无关的,因此可以更好的在不同场景中复用
- 便于单元测试。纯函数对于相同输入一定得到相同输出的特点,便于自动化测试
缺点
- 相比于命令式编程,往往会包装更多的方法,产生更多的上下文切换带来的开销。
- 更多的使用递归,导致更高的内存开销。
- 为了实现不可变数据,会产生更多的对象,对垃圾回收的压力更大。
偏函数
偏函数的定义简单来说就是,将函数转换为参数更少的函数,也就是为其预设参数。
从 fn(arg1, arg2) 到 fn(arg1)
柯里化(curry)函数
柯里化函数在偏函数的基础上,不仅减少了函数入参个数,还改变了函数执行次数。其含义就是将一个接收 N 个入参的函数,改写为接受一个入参,并返回接受剩余 N-1 个参数的函数。也就是:
fn(1,2,3) => fn(1)(2)(3)
实现一个柯里化函数也是面试高频内容,其实如果规定了函数入参个数,那么是很容易实现的。例如对于入参个数为 3 的函数,实现如下
const curry = (fn) => (arg1) => (arg2) => (arg3) => fn(arg1, arg2, arg3); const fn = (a, b, c) => console.log(a, b, c); curry(fn)(1)(2)(3); // 1 2 3
那么实现通用的 curry 函数的关键就在于:
- 自动判断函数入参
- 自我递归调用
const curry = (fn) => { const argLen = fn.length; // 原函数的入参个数 const recursion = (args) => args.length >= argLen ? fn(...args) : (newArg) => recursion([...args, newArg]); return recursion([]); };
compose & pipe
compose 和 pipe 同样是很常见的工具,一些开源库中也都有自己针对特定场景的实现(如 Redux、koa-compose)。而要实现一个通用的 compose 函数其实很简单,借助数组的 reduce 方法就好
const compose = (funcs) => { if (funcs.length === 0) { return (arg) => arg; } if (funcs.length === 1) { return funcs[0]; } funcs.reduce( (pre, cur) => (...args) => pre(cur(...args)) ); }; const fn1 = (x) => x * 2; const fn2 = (x) => x + 2; const fn3 = (x) => x * 3; const compute = compose([fn1, fn2, fn3]); // compute = (...args) => fn1(fn2(fn3(...args))) console.log(compute(1)); // 10
而 pipe
函数与 compose
的区别则是其执行顺序相反,正如其字面含义,就像 Linux 中的管道操作符,前一个函数的结果流向下一个函数的入参,所以把 reduce
方法改为 reduceRight
即可:
const pipe = (funcs) => { if (funcs.length === 0) { return (arg) => arg; } if (funcs.length === 1) { return funcs[0]; } funcs.reduceRight( (pre, cur) => (...args) => pre(cur(...args)) ); }; const compute = pipe([fn1, fn2, fn3]); // compute = (...args) => fn3(fn2(fn1(...args))) console.log(compute(1)); // 12
函数式在常见库中的应用
React
在最新的 React 文档中,函数式组件 + hook 写法已经成为官方的首推风格。而这正是基于函数式编程的理念。React 的核心特征是“数据驱动视图”,即UI = render(data)
。
UI 的更新是一定需要副作用的,那么如何保证组件函数的“纯”呢?答案是将副作用在组件之外进行管理,所有的副作用都交由 hooks,组件可以使用 state,但并不拥有 state。
Hooks 相比类组件的优点:
- 关注点分离。在类组件中,逻辑代码放在生命周期中,代码是按照生命周期组织的。而在 hooks 写法中,代码按业务逻辑组织,更加清晰
- 写法更简单。省去了类组件写法中基于继承的各种复杂设计模式
Immutable.js
Immutable
是用于达成函数式编程三要素中的“不可变值”。我的初次接触是在 Redux 中使用到,Redux 要求 reducer 中不能修改 state 而是应该返回新的 state,但这仅是一种“规范上的约定”,而不是“代码层面的限制”,而 Immutable 正是用于提供 JS 原生不存在的不可修改的数据结构。
Immutable 提供了一系列自定义数据结构,并提供相应的更新 API,而这些 API 将通过返回新值的方式执行更新。
let map1 = Immutable.Map({}); map1 = map1.set("name", "youky"); console.log(map1);
Immutable 内部的存储参考 字典树(Trie)
实现,在每次修改时,不变的属性将用索引指向原来的值,只对改变的值赋值新的索引。这样更新的效率会比整体拷贝高很多。
Redux
Redux 中体现函数式编程模式的也有很多地方:
- reducer 要是纯函数(如果需要副作用,则使用 redux-saga 等中间件)
- reducer 中不直接修改 state,而是返回新的 state
- 中间件的高阶函数与柯里化
- 提供了一个
compose
函数,这是函数式编程中非常基本的工具函数
Redux 源码中的 compose 函数实现如下:
export default function compose(): <R>(a: R) => R; export default function compose<F extends Function>(f: F): F; /* two functions */ export default function compose<A, T extends any[], R>( f1: (a: A) => R, f2: Func<T, A> ): Func<T, R>; /* three functions */ export default function compose<A, B, T extends any[], R>( f1: (b: B) => R, f2: (a: A) => B, f3: Func<T, A> ): Func<T, R>; /* four functions */ export default function compose<A, B, C, T extends any[], R>( f1: (c: C) => R, f2: (b: B) => C, f3: (a: A) => B, f4: Func<T, A> ): Func<T, R>; /* rest */ export default function compose<R>( f1: (a: any) => R, ...funcs: Function[] ): (...args: any[]) => R; export default function compose<R>(...funcs: Function[]): (...args: any[]) => R; export default function compose(...funcs: Function[]) { if (funcs.length === 0) { // infer the argument type so it is usable in inference down the line return <T>(arg: T) => arg; } if (funcs.length === 1) { return funcs[0]; } return funcs.reduce( (a, b) => (...args: any) => a(b(...args)) ); }
首先是用函数重载来进行类型声明。
在实现其实非常简单:
- 传入数组为空,返回一个自定义函数,这个函数返回接收到的参数
- 如果传入数组长度为 1,返回唯一的一个元素
- 使用 reduce 方法组装数组元素,返回一个包含元素嵌套执行的新函数
Koa
在 Koa 的洋葱模型中,通过 app.use
添加中间件,会将中间件函数存储于this.middleware
use (fn) { if (typeof fn !== 'function') throw new TypeError('middleware must be a function!') debug('use %s', fn._name || fn.name || '-') this.middleware.push(fn) return this }
通过 koa-compose
模块将所有的中间件组合为一个函数 fn,在每次处理请求时调用
// callback 就是 app.listen 时绑定的处理函数 callback () { const fn = this.compose(this.middleware) if (!this.listenerCount('error')) this.on('error', this.onerror) const handleRequest = (req, res) => { const ctx = this.createContext(req, res) return this.handleRequest(ctx, fn) } return handleRequest }
这里的 compose 决定了多个中间件之间的调用顺序,用户可以通过 option 传入自定义的 compose 函数,或默认使用 koa-compose
模块。其源码如下:
function compose(middleware) { if (!Array.isArray(middleware)) throw new TypeError("Middleware stack must be an array!"); for (const fn of middleware) { if (typeof fn !== "function") throw new TypeError("Middleware must be composed of functions!"); } /** * @param {Object} context * @return {Promise} * @api public */ return function (context, next) { // last called middleware # let index = -1; return dispatch(0); function dispatch(i) { if (i <= index) return Promise.reject(new Error("next() called multiple times")); index = i; let fn = middleware[i]; if (i === middleware.length) fn = next; if (!fn) return Promise.resolve(); try { return Promise.resolve(fn(context, dispatch.bind(null, i + 1))); } catch (err) { return Promise.reject(err); } } }; }
同样是先对参数进行判断。与 redux 中的 compose 不同的是,koa 中的中间件是异步的,需要手动调用 next 方法将执行权交给下一个中间件。通过代码可知,中间件中接收的 next 参数实际就是 dispatch.bind(null, i + 1))
也就是 dispatch 方法,以达到递归执行的目的。
这里使用 bind
实际上就是创建了一个偏函数。根据 bind 的定义,在 this 之后传入的若干个参数会在返回函数调用时插入参数列表的最前面。也就是说
const next = dispatch.bind(null, i + 1)) next() // 等价于dispatch(i+1)
附:函数式编程与数学原理
函数并不是计算机领域的专有名词。实际上,函数一词最早由莱布尼兹在 1694 年开始使用。
函数式编程的思想背后,其实蕴含了范畴论、群论等数学原理的思想。
以上就是从Immutable.js到Redux函数式编程的详细内容,更多关于Immutable.js Redux函数式编程的资料请关注脚本之家其它相关文章!