前言
在讲函数式组件之前，笔者有必要声明一下，笔者对函数式编程知之甚少，此篇文章全是因为函数式编程在当今前端开发较为流行，所以才要去学习Orz。像 ES6 中的箭头函数，Redux 中的 compose，React 16.6之后的 React.memo()，16.8 之后的 Hooks，使用函数式组件成为主流（自然，Vue3 中也有 composition API等）
因为我们使用的各种框架，越来越偏向于函数式开发，所以为了看懂、使用这些代码，我们有必要学习函数式编程
什么是函数式编程
写代码时，不同的写法造成不同的门派，主流的编程范式有两种，即命令式编程（Imperative programming）和声明式编程（Declarative programming）
当然还有像事件驱动编程等，此处不讲
在命令式编程语言中一般支持四种基本语句：
运算语句
循环语句（for、while）
条件分支语句（if else、switch）
无条件分支语句（return、break、continue）
它关注的过程，所以也被称为过程化编程，与之对应的是声明式编程
命令式编程告诉计算机如何计算、关心解决问题的步骤
声明式编程告诉计算机需要计算什么，关心解决问题的目标
两种编程方式在 JavaScript 均有开花，在以往的开发中（即React、Vue等未出现前），我们习惯使用命令式编程，其中的代表就是面向对象编程，即通过对象、类、继承、封装等特性实现面向对象编程，流行的库是 jquery
即使当初不那么流行，但 JavaScript 是一直支持声明式编程的，即通过函数式编程来实现，其原因是函数是一等公民，它能作为参数和返回值。流行的库是 underscorejs、lodash
函数式编程有哪些特点
柯里化（Currying）、缓存函数、纯函数、函数组合（compose）、不可变数据、高阶函数
我们依次讲讲这几个特点
柯里化
什么是柯里化
柯里化是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术
——wiki[1]
也就是说，柯里化是一种函数的转换，它是将一个函数从f(a, b, c) 的写法转换为f(a)(b)(c)
通俗来讲：用闭包把参数保存起来，当参数的数量足够执行函数了，就开始执行函数。它不会调用函数，只是对函数进行转换
// 柯里化之前function add(x, y) { return x + y;}add(1, 2); // 3// 柯里化之后function add(y) { return function (x) { return x + y; };}// ES6 箭头函数表示const add = x => y => x + y;add(2)(1);
如上案例，我们就是将add(1, 2) 转换为了 add(2)(1)，当然，此案例是模拟柯里化，一般来说，我们会写个「转换函数」将函数适配成柯里化型函数
const curryAdd = curry(add)console.log(curryAdd(1)(2)) // 3
那么如何实现 curry 呢？需要满足两点
判断当前函数传入的参数是否大于或等于fn 需要参数的数量，如果是，直接执行 fn
如果传入参数数量不够，返回一个闭包，暂存传入的参数，并重新返回 curry 函数
const curry = (fn, ...args) => { if (args.length >= fn.length) { return fn(...args) } else { return (...args2) => curry(fn, ...args, ...args2) }}
我们来一个简单的实例验证一下：
function fun(a, b, c) { return a + b + c;}const curryFun = curry(fun);curryingFun(1)(2)(3); // 6curryingFun(1, 2)(4); // 7curryingFun(1, 2, 5); // 8
翻看函数式编程概念的两个库：undersore.js 及 lodash 中各自实现的 curry
undersore.js[2]
lodash[3]
箭头函数的使用
在上面的例子中，我们频繁使用箭头函数，箭头函数的魅力之一是它符合函数式编程的思维，例如：
function add(y) { return function (x) { return x + y; };}const add = x => y => x + y;
// redux 中的 compose 函数const compose = (...func) => { if (func.length === 0) { return args => args } if (func.length === 1) { return func[0] } return func.reduce((a,b) => (...args) => a(b(...args)))}
function enhancer(originF) { return function (...args) { console.log('before'); const result = originF(...args); console.log('after'); return result; };}// 等于const enhancer = (originF) => (...args) => { console.log('before'); const result = originF(...args); console.log('after'); return result; };
// 三数之乘const multi = a => b => c => a * b * c
笔者认为，柯里化就是利用了闭包的特性，将参数存着，到了要使用的时候再释放，而这正式柯里化的应用之一
柯里化的应用
在开发中，我们会遇到这种情况，开发了一个工具函数，在调用时，会使用一个频繁的参数，而如果将这个参数提取出来，就能优化代码，如
function add(a, b) { return a + b}add(10, 1) // 11add(10, 11) // 21add(10, 111) // 121
如果我们柯里化，将第一个参数 10 内置进函数中，代码就能清晰明了
// 最简单的优化functon add10(b) { return add(10, b)} add10(1) // 11add10(11) // 21add10(111) // 121
函数 add10 就是经过了柯里化的函数，就像我们上文所讲，一般用个包装函数将其适配成柯里化型函数，这里我们调用上文的 curry 函数
// 完整版function add(a, b) { return a + b;}// 柯里化包装函数const curry = (fn, ...args) => { if (args.length >= fn.length) { return fn(...args) } else { return (...args2) => curry(fn, ...args, ...args2) }}const add10 = curry(add, 10)add10(1) // 11add10(11) // 21add10(111) // 121
缓存函数
缓存函数就是将函数返回值缓存起来的方法。与柯里化相比，它似乎更简单。例如
function add(a, b) { return a + b;}let memoAdd = memoize(add)memoAdd(1, 2) // 3memoAdd(1, 3) // 相同的参数，第二次调用时，从缓存中取出数据
如何实现呢？
其实很简单，就是用闭包存在内存中。如果一致，就返回，不一致就存在对象中，再返回
const memoize = (func) => { let cache = {} return function(key) { if (!cache[key]) { cache[key] = func.apply(this, arguments) } return cache[key] }}
纯函数
笔者认为纯函数就类似数学中的函数，例如 y = f(x)，更具体点就是：y=2x，相同的输入，就有相同的输出，在执行过程中不会产生副作用
所有它有两个特点：
不改变原数据（没有副作用）
返回一个新数据
const arr = [1, 2, 3]// 纯函数arr.slice(1)console.log(arr) // [1, 2, 3]// 产生副作用，非纯函数arr.splice(1)console.log(arr) // [1]
JavaScript 中的哪些 API 是纯函数
数组：slice、concat、map、reduce、filter
slice、concat 我们在 拷贝的秘密 曾经讲过，是浅拷贝的方法
map、filter 是ES6 新增的 API
字符串：String 类型及其他的基本类型的 API 都是不可变的，它们的每个 API 都是纯函数，不会改变原数据
var str = "hello"console.log(str.slice(0, 3)) // hel , slice 在 String 类型中同样适用，console.log(str) // helloconsole.log(str.substr(0, 3)) // helconsole.log(str) // helloconsole.log(str.substring(0,3)); // helconsole.log(str) // hello// 其他的 API 也是如此
函数组合（compose）
就是将多个函数依次执行，将这些函数组合起来，自动依次执行，这一过程就是函数组合
这么做的目的是为了让代码更加简单且具有可读性
function double(num) { return num * 2}function square(num) { return num ** 2}// 普通做法const res = square(double(10))console.log(res) // 400// 函数组合function composeFn(fn1, fn2) { return function (count) { return fn2(fn1(count)) }}const newFn = composeFn(double, square)const res2 = newFn(20) // 1600
看看 underscore 的 compose[4] 函数
function compose() { var args = arguments; var start = args.length - 1; return function() { var i = start; var result = args[start].apply(this, arguments); while(i--) result = args[i].call(this, result); return result; }}
看到 compose 是否很熟悉，redux 中的源码[5]是这样写的
function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if(funcs.length === 1) { return funcs[0] } return funcs.reduce((a,b) => (...args) => a(b(...args)))}
如果在实际开发中，就可以用这一概念解决洋葱代码
fn3(fn2(fn1(fn0(x)))) // 洋葱代码var result = compose(f3, f2, f1, f0) // 函数组合代码result(x)
高阶函数
简单来说，高阶函数就是一个返回另一个函数的函数
function sayHello() { return function() { console.log("hello") }}
其本质是因为函数是一等公民，满足作为参数或者返回值
其 React 中也有高阶组件的概念，其原理都一样，即将组件当作参数传入，返回另一个组件
不可变数据
不可变数据结构式函数式编程中的基本准则
JavaScript 的对象是可变的，原因是为了节约内存，但也同样带来了副作用，当应用程序复杂后，维护代码难度会加深
我们在 拷贝的秘密 中曾经讲过，基本类型的数据是不可变的，因为它们存在栈内存，而引用类型（即对象）的数据是可变的，它存在堆内存，当赋值时，拷贝的时它的引用地址
所以我们在赋值时会根据情况使用浅拷贝、深拷贝来实现
在 React 开发时，我们会用 immutable.js 、immer 对数据进行不可变
总结
我们不管其他的，单单就函数式编程在前端方面有哪些用途？如在 Koa 中的洋葱模型、redux 中的 compose 函数就是函数组合，React 开发时的 HOC 高阶组件就采用了高阶函数，以及它（React）为了让数据保持唯一性，而可以引用 不可变数据库（ immutable.js、immer ）是函数式编程的特性——不可变数据
当然，这些只是笔者对函数式编程浅薄的认知，其内容当然不知以上说的几点，还有惰性函数、函子等知识点，以及其他语言中的函数式编程，待笔者等级提升后再来战
参考资料
简明 JavaScript 函数式编程-入门篇[8]
函数式编程思维[9]
浅析 JavaScript 函数式编程[10]
函数式编程（FP）[11]
前端开发js函数式编程真实用途体现在哪里？[12]
JavaScript专题之函数组合[13]
[1] wiki: https://zh.wikipedia.org/wiki/%E6%9F%AF%E9%87%8C%E5%8C%96[2] undersore.js: https://github.com/lodash/lodash/blob/npm/curry.js[3] lodash: https://github.com/lodash/lodash/blob/es/curry.js[4] compose: https://github.com/jashkenas/underscore/blob/master/modules/compose.js[5] 源码: https://github.com/reduxjs/redux/blob/master/src/compose.ts[6] immutable.js: https://immutable-js.com/[7] immer: https://immerjs.github.io/immer/[8] 简明 JavaScript 函数式编程-入门篇: https://zhuanlan.zhihu.com/p/81302150[9] 函数式编程思维: https://github.com/sunyongjian/FP-Code[10] 浅析 JavaScript 函数式编程: https://juejin.cn/post/6940442700889980965[11] 函数式编程（FP）: https://juejin.cn/post/7065093131233919006[12] 前端开发js函数式编程真实用途体现在哪里？: https://www.zhihu.com/question/59871249[13] JavaScript专题之函数组合: https://github.com/mqyqingfeng/Blog/issues/45
⚠️「随朱波流」只是记录本人关于编程、生活、个人成长、思考的自留地。如有需要，可前往 blog.azhubaby.com（阅读原文）中查看第一手文章