javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Immutable.js Redux函数式编程

从Immutable.js到Redux函数式编程

作者:Youky

这篇文章主要为大家介绍了从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 是一种多范式语言,而从前端的发展历史来看,各时段的主流框架,也正对应了三种编程范式:

函数式编程的优缺点

优点

缺点

偏函数

偏函数的定义简单来说就是,将函数转换为参数更少的函数,也就是为其预设参数。

从 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 相比类组件的优点:

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 中体现函数式编程模式的也有很多地方:

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))
  );
}

首先是用函数重载来进行类型声明。

在实现其实非常简单:

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函数式编程的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文