Immutable.js到Redux函数式编程源码分析

这篇文章主要介绍了Immutable.js到Redux函数式编程源码分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Immutable.js到Redux函数式编程源码分析文章都会有所收获，下面我们一起来看看吧。

基本概念

函数式编程（英语：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函数式编程源码分析的资料请关注九品源码其它相关文章！