摘要：組合組合的功能非常強大，也是函數(shù)式編程的一個核心概念，所謂的對過程進行封裝很大程度上就是依賴于組合。在理解之前，先認識一個東西概念容器容器為函數(shù)式編程里普通的變量對象函數(shù)提供了一層極其強大的外衣，賦予了它們一些很驚艷的特性。

JavaScript是一門多范式語言，即可使用OOP（面向?qū)ο螅部梢允褂肍P（函數(shù)式），由于筆者最近在學習React相關(guān)的技術(shù)棧，想進一步深入了解其思想，所以學習了一些FP相關(guān)的知識點，本文純屬個人的讀書筆記，如果有錯誤，望輕噴且提點。

函數(shù)式編程（英語：functional programming）或稱函數(shù)程序設(shè)計、泛函編程，是一種編程范式，它將計算機運算視為函數(shù)運算，并且避免使用程序狀態(tài)以及易變對象。即對過程進行抽象，將數(shù)據(jù)以輸入輸出流的方式封裝進過程內(nèi)部，從而也降低系統(tǒng)的耦合度。

Js支持FP的一個重要原因在于，在JS中，函數(shù)是一等公民。即你可以像對其他數(shù)據(jù)類型一樣對其進行操作，把他們存在數(shù)組里，當作參數(shù)傳遞，賦值給變量...等等。如下：

const func = () => {}

// 存儲
const a = [func]

// 參數(shù) 返回值
const x = (func) => {
    ......
    ......
    return func
}

x(func)

這個特性在編寫語言程序時帶來了極大的便利，下面的知識及例子都建立在此基礎(chǔ)上。

純函數(shù)是這樣一種函數(shù)，即相同的輸入，永遠會得到相同的輸出，而且沒有任何可觀察的副作用。
副作用包括但不限于：

打印/log

發(fā)送一個http請求

可變數(shù)據(jù)

DOM查詢

簡單一句話， 即只要是與函數(shù)外部環(huán)境發(fā)生交互的都是副作用。

像Js中， slice就是純函數(shù)， 而splice則不是

var xs = [1,2,3,4,5];

// 純的
xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]

xs.slice(0,3);
//=> [1,2,3]


// 不純的
xs.splice(0,3);
//=> [1,2,3]

xs.splice(0,3);
//=> [4,5]

xs.splice(0,3);
//=> []

在React生態(tài)中，使用純函數(shù)的例子很常見，如React Redner函數(shù)，Redux的reducer，Redux-saga的聲明式effects等等。

React Render
在React中，Render返回了一個JSX表達式，只要輸入相同，即可以保證我們拿到同樣的輸出（最終結(jié)果渲染到DOM上），而內(nèi)部的封裝細節(jié)我們不需要關(guān)心，只要知道它是沒有副作用的，這在我們開發(fā)過程中帶來了極大的便利。當我們的程序出問題時（渲染出來與預期不符合），我們只要關(guān)心我們的入?yún)⑹欠裼袉栴}即可。

class Component extends React.Component {
    render() {
        return (
            

        )
    }
}

Redux的reducer
Redux的reducer函數(shù)要求我們每一次都要返回一個新的state, 并且在其中不能有任何副作用，只要傳入?yún)?shù)相同，返回計算得到的下一個 state 就一定相同。沒有特殊情況、沒有副作用，沒有 API 請求、沒有變量修改，單純執(zhí)行計算。這樣做可以使得我們很容易的保存了每一次state改變的情況，對于時間旅行這種需求更是天然的親近。特別是在調(diào)試的過程中，我們可以借助插件，任意達到每一個state狀態(tài)，能夠輕松的捕捉到錯誤是在哪一個節(jié)點出現(xiàn)。

function todoApp(state = initialState, action) {
  switch (action.type) {
    case SET_VISIBILITY_FILTER:
      return Object.assign({}, state, {
        visibilityFilter: action.filter
      })
    case ADD_TODO:
      return Object.assign({}, state, {
        todos: [
          ...state.todos,
          {
            text: action.text,
            completed: false
          }
        ]
      })
    default:
      return state
  }
}

Redux-sage的聲明式effects
許多時候， 我們會寫這樣的函數(shù)

const sendRequest = () => {
    return axions.post(...)
}

這是一個不純的函數(shù)，因為它包含了副作用，發(fā)起了http請求，我們可以這樣封裝一下：

const sendRequestReducer = () => {
    return () => {
        return axios.post(...)
    }
}

ok, 現(xiàn)在是一個純函數(shù)了，正如Redux-saga中的effects一樣：

import { call } from "redux-saga/effects"

function* fetchProducts() {
  const products = yield call(Api.fetch, "/products")
  // ...
}

實際上call不立即執(zhí)行異步調(diào)用，相反，call 創(chuàng)建了一條描述結(jié)果的信息。那么這樣做除了增加代碼的復雜度，還可以給我們帶來什么？參考saga的官方文檔就知道了， 答案是測試：

這些 聲明式調(diào)用（declarative calls） 的優(yōu)勢是，我們可以通過簡單地遍歷 Generator 并在 yield 后的成功的值上面做一個 deepEqual 測試， 就能測試 Saga 中所有的邏輯。這是一個真正的好處，因為復雜的異步操作都不再是黑盒，你可以詳細地測試操作邏輯，不管它有多么復雜。

import { call } from "redux-saga/effects"
import Api from "..."

const iterator = fetchProducts()

// expects a call instruction
assert.deepEqual(
  iterator.next().value,
  call(Api.fetch, "/products"),
  "fetchProducts should yield an Effect call(Api.fetch, "./products")"
)

純函數(shù)有著以下的優(yōu)點

可緩存性
首先，純函數(shù)總能夠根據(jù)輸入來做緩存。實現(xiàn)緩存的一種典型方式是 memoize 技術(shù)：

var memoize = function(f) {
  var cache = {};

  return function() {
    var arg_str = JSON.stringify(arguments);
    cache[arg_str] = cache[arg_str] || f.apply(f, arguments);
    return cache[arg_str];
  };
};

var squareNumber  = memoize(function(x){ return x*x; });

squareNumber(4);
//=> 16

squareNumber(4); // 從緩存中讀取輸入值為 4 的結(jié)果
//=> 16

squareNumber(5);
//=> 25

squareNumber(5); // 從緩存中讀取輸入值為 5 的結(jié)果
//=> 25

可移植性
純函數(shù)因為不依賴外部環(huán)境，所以非常便于移植，你可以在任何地方使用它而不需要附帶著引入其他不需要的屬性。

可測試性
如上面提到的Redux reducer和Redux-saga一樣， 它對于測試天然親近。

并行代碼
我們可以并行運行任意純函數(shù)。因為純函數(shù)根本不需要訪問共享的內(nèi)存，而且根據(jù)其定義，純函數(shù)也不會因副作用而進入競爭態(tài)（race condition）。

在計算機科學中，柯里化（英語：Currying），又譯為卡瑞化或加里化，是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)（最初函數(shù)的第一個參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)而且返回結(jié)果的新函數(shù)的技術(shù)。

var add = function(x) {
  return function(y) {
    return x + y;
  };
};

var increment = add(1);
var addTen = add(10);

increment(2);
// 3

addTen(2);
// 12

在Lodash類庫中，就有這么一個curry函數(shù)來幫助我們處理科里化，關(guān)于如何實現(xiàn)一個curry函數(shù)，推薦大家參考這篇文章

var abc = function(a, b, c) {
  return [a, b, c];
};
 
var curried = _.curry(abc);
 
curried(1)(2)(3);
// => [1, 2, 3]
 
curried(1, 2)(3);
// => [1, 2, 3]
 
curried(1, 2, 3);
// => [1, 2, 3]
 
// Curried with placeholders.
curried(1)(_, 3)(2);
// => [1, 2, 3]

偏函數(shù)本身與科里化并不相關(guān)， 但在日常的編寫程序中，或許我們使用更多的是偏函數(shù)，所以在這里簡單的介紹一下偏函數(shù)

偏函數(shù)應用是找一個函數(shù)，固定其中的幾個參數(shù)值，從而得到一個新的函數(shù)。

有時候，我們會寫一個專門發(fā)送http請求的函數(shù)

const sendRequest = (host, fixPath, path) => {
    axios.post(`${host}${fixPath}{path}`)
}

但是大多數(shù)時候， host和fixPath是固定的， 我們不想每次都寫一次host和fixPath，但我們又不能寫死，因為我們需要sendRequest這個函數(shù)是可以移植的，不受環(huán)境的約束，那么我們可以這樣

const sendRequestPart = (path) => {
    const host = "..."
    const fixPath = "..."
    return sendRequest(host, fixPath, path)
}

科里化和偏函數(shù)的主要用途是在組合中，這一小節(jié)主要介紹了他們的使用方法和行為。

組合的功能非常強大， 也是函數(shù)式編程的一個核心概念， 所謂的對過程進行封裝很大程度上就是依賴于組合。那么什么是組合？

var compose = function(f,g) {
  return function(x) {
    return f(g(x));
  };
};

var toUpperCase = function(x) { return x.toUpperCase(); };
var exclaim = function(x) { return x + "!"; };
var shout = compose(exclaim, toUpperCase);

shout("send in the clowns");
//=> "SEND IN THE CLOWNS!"

上面的compose就是一個最簡單的組合函數(shù)， 當然組合函數(shù)并不限制于傳入多少個函數(shù)參數(shù)，它最后只返回一個函數(shù)，我個人更喜歡將它認為像管道一樣，將數(shù)據(jù)經(jīng)過不同函數(shù)的逐漸加工，最后得到我們想要的結(jié)果

const testFunc = compose(func1, func2, func3, func4)  
testFunc(...args) 

在js中， 實現(xiàn)compose函數(shù)比較容易

const compose = (...fns) => {
    return (...args) => {
        let res = args
        for (let i = fns.length - 1; i > -1; i--) {
            res = fns[i](res)
        }
        return res
    }
}

React官方推崇組合優(yōu)于繼承這個概念，這里選擇兩個比較典型的例子來看

React中的高階組件
在React中，有許多使用高階組件的地方，如React-router的withRouter函數(shù)，React-redux的connect函數(shù)返回的函數(shù)，

// Navbar 和 Comment都是組件
const NavbarWithRouter = withRouter(Navbar);
const ConnectedComment = connect(commentSelector, commentActions)(Comment);

而由于高階函數(shù)的簽名是Component => Component。所以我們可以很容易的將他們組合到一起，這也是官方推薦的做法

// 不要這樣做……
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ……你可以使用一個函數(shù)組合工具
// compose(f, g, h) 和 (...args) => f(g(h(...args)))是一樣的
const enhance = compose(
  // 這些都是多帶帶一個參數(shù)的高階組件
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

Redux的compose函數(shù)
Redux的compose函數(shù)實現(xiàn)要比上面提到的簡潔的多

export default 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)))
}

這個實現(xiàn)咋看之下有點懵逼， 所以可以拆開來看一下

composeFn = compose(fn1, fn2, fn3, fn4)

那么reduce循環(huán)運行時， 第一次a就是fn1, b是fn2, 第二次a是(...args) => fn1(fn2(...args)), b是fn3, 第三次運行的時候則是a是(...args) => fn1(fn2(fn3(...args))), b是fn4， 最后返回了fn1(fn2(fn3(fn4(...args))))

它的意思是說，函數(shù)無須提及將要操作的數(shù)據(jù)是什么樣的。

// 非 pointfree，因為提到了數(shù)據(jù)：word
var snakeCase = function (word) {
  return word.toLowerCase().replace(/s+/ig, "_");
};

// pointfree
var snakeCase = compose(replace(/s+/ig, "_"), toLowerCase);

pointfree 模式能夠幫助我們減少不必要的命名，讓代碼保持簡潔和通用。對函數(shù)式代碼來說，pointfree 是非常好的石蕊試驗，因為它能告訴我們一個函數(shù)是否是接受輸入返回輸出的小函數(shù)。比如，while 循環(huán)是不能組合的。不過你也要警惕，pointfree 就像是一把雙刃劍，有時候也能混淆視聽。并非所有的函數(shù)式代碼都是 pointfree 的，不過這沒關(guān)系?？梢允褂盟臅r候就使用，不能使用的時候就用普通函數(shù)。

有了組合， 配合上面提到的科里化和偏函數(shù)應用， 可以將程序拆成一個個小函數(shù)然后組合起來， 優(yōu)點已經(jīng)很明顯的呈現(xiàn)出來，也很直觀的表達出了函數(shù)式編程的封裝過程的核心概念。

函數(shù)式編程建立在范疇學上，很多時候討論起來難免有點理論化，所以這里簡單的介紹一下范疇。

有著以下這些組件（component）的搜集（collection）就構(gòu)成了一個范疇：

對象的搜集

態(tài)射的搜集

態(tài)射的組合

identity 這個獨特的態(tài)射

對象的搜集
對象就是數(shù)據(jù)類型，例如 String、Boolean、Number 和 Object 等等。通常我們把數(shù)據(jù)類型視作所有可能的值的一個集合（set）。像 Boolean 就可以看作是 [true, false] 的集合，Number 可以是所有實數(shù)的一個集合。把類型當作集合對待是有好處的，因為我們可以利用集合論（set theory）處理類型。

態(tài)射的搜集
態(tài)射是標準的、普通的純函數(shù)。

態(tài)射的組合
即上面提到的compose

identity 這個獨特的態(tài)射
讓我們介紹一個名為 id 的實用函數(shù)。這個函數(shù)接受隨便什么輸入然后原封不動地返回它：

var id = function(x){ return x; };

在學習函數(shù)式編程的時候，第一次看到functor的時候一臉懵逼， 確實不理解這個東西是什么， 可以做什么，加上一堆術(shù)語，頭都大了。在理解functor之前，先認識一個東西

容器

容器為函數(shù)式編程里普通的變量、對象、函數(shù)提供了一層極其強大的外衣，賦予了它們一些很驚艷的特性。

var Container = function(x) {
  this.__value = x;
}
Container.of = x => new Container(x);

//試試看
Container.of(1);
//=> Container(1)

Container.of("abcd");
//=> Container("abcd")

Container.of 把東西裝進容器里之后，由于這一層外殼的阻擋，普通的函數(shù)就對他們不再起作用了，所以我們需要加一個接口來讓外部的函數(shù)也能作用到容器里面的值（像Array也是一個容器）：

Container.prototype.fmap = function(f){
  return Container.of(f(this.__value))
}

我們可以這樣使用它：

Container.of(3)
    .fmap(x => x + 1)                //=> Container(4)
    .fmap(x => "Result is " + x);    //=> Container("Result is 4")

我們通過簡單的代碼就實現(xiàn)了一個鏈式調(diào)用，并且這也是一個functor。

Functor（函子）是實現(xiàn)了 fmap 并遵守一些特定規(guī)則的容器類型。

這樣子看還是有點不好理解， 那么參考下面這句話可能會好一點：

a functor is nothing more than a data structure you can map functions over with the purpose of lifting values from a container, modifying them, and then putting them back into a container.   都是些簡單的單詞，意會比起本人翻譯會更容易理解。

加上一張圖：

ok, 現(xiàn)在大概知道functor是一個什么樣的東西了。

那么functor有什么作用呢？

鏈式調(diào)用
首先它可以鏈式調(diào)用，正如上面提到的一樣。

Immutable
可以看到， 我們每次都是返回了一個新的Container.of， 所以數(shù)據(jù)是Immutable的， 而Immutable的作用就不在這里贅述了。

將控制權(quán)交給Container
將控制權(quán)交給Container， 這樣他就可以決定何時何地怎么去調(diào)用我們傳給fmap的function，這個作用非常強大，可以為我們做空值判斷、異步處理、惰性求值等一系列麻煩的事。

上面作用的第三點可能直觀上有點難以理解， 下面舉三個簡單的例子

Maybe Container
定義一個Maybe Container來幫我們處理空值的判斷

var Maybe = function(x) {
  this.__value = x;
}

Maybe.of = function(x) {
  return new Maybe(x);
}

Maybe.prototype.fmap = function(f) {
  return this.isNothing() ? Maybe.of(null) : Maybe.of(f(this.__value));
}

Maybe.prototype.isNothing = function() {
  return (this.__value === null || this.__value === undefined);
}

//試試看
import _ from "lodash";
var add = _.curry(_.add);

Maybe.of({name: "Stark"})
    .fmap(_.prop("age"))
    .fmap(add(10));
//=> Maybe(null)

Maybe.of({name: "Stark", age: 21})
    .fmap(_.prop("age"))
    .fmap(add(10));
//=> Maybe(31)

當然， 這里可以利用上面提到的科里化函數(shù)來簡化掉一堆fmap的情況

import _ from "lodash";
var compose = _.flowRight;
var add = _.curry(_.add);

// 創(chuàng)造一個柯里化的 map
var map = _.curry((f, functor) => functor.fmap(f));

var doEverything = map(compose(add(10), _.property("age")));

var functor = Maybe.of({name: "Stark", age: 21});
doEverything(functor);
//=> Maybe(31)

Task Container
我們可以編寫一個Task Container來幫我們處理異步的情況

var fs = require("fs");

//  readFile :: String -> Task(Error, JSON)
var readFile = function(filename) {
  return new Task(function(reject, result) {
    fs.readFile(filename, "utf-8", function(err, data) {
      err ? reject(err) : result(data);
    });
  });
};

readFile("metamorphosis").fmap(split("
")).fmap(head);

例子中的 reject 和 result 函數(shù)分別是失敗和成功的回調(diào)。正如你看到的，我們只是簡單地調(diào)用 Task 的 map 函數(shù)，就能操作將來的值，好像這個值就在那兒似的。(這看起來有點像Promise)

Io Container
我們可以利用Io Container來做惰性求值

import _ from "lodash";
var compose = _.flowRight;

var IO = function(f) {
    this.__value = f;
}

IO.of = x => new IO(_ => x);

IO.prototype.map = function(f) {
    return new IO(compose(f, this.__value))
};

var io_document = new IO(_ => window.document);

io_document.map(function(doc){ return doc.title });
//=> IO(document.title)

注意我們這里雖然感覺上返回了一個實際的值 IO(document.title)，但事實上只是一個對象：{ __value: [Function] }，它并沒有執(zhí)行，而是簡單地把我們想要的操作存了起來，只有當我們在真的需要這個值得時候，IO 才會真的開始求值，

functor 的概念來自于范疇學，并滿足一些定律。 即functor 接受一個范疇的對象和態(tài)射（morphism），然后把它們映射（map）到另一個范疇里去。

Js中也有一些實現(xiàn)了functor, 如map、filter

map    :: (A -> B)   -> Array(A) -> Array(B)
filter :: (A -> Boolean) -> Array(A) -> Array(A)

我們來寫一個函數(shù) cat，這個函數(shù)的作用和 Linux 命令行下的 cat 一樣，讀取一個文件，然后打出這個文件的內(nèi)容

import fs from "fs";
import _ from "lodash";

var map = _.curry((f, x) => x.map(f));
var compose = _.flowRight;

var readFile = function(filename) {
    return new IO(_ => fs.readFileSync(filename, "utf-8"));
};

var print = function(x) {
    return new IO(_ => {
        console.log(x);
        return x;
    });
}

var cat = compose(map(print), readFile);

cat("file")
//=> IO(IO("file的內(nèi)容"))

ok, 我們最后得到的是兩層嵌套的IO, 要獲取其中的值

cat("file").__value().__value()

問題很明顯的出來了， 我們需要連續(xù)調(diào)用兩次_value才能獲取， 那么假如我們嵌套了更多呢， 難道每次都要調(diào)用一大堆__value嗎， 那當然是不可能的。

我們可以使用一個join函數(shù)， 來將Container里面的東西拿出來， 像這樣

var join = x => x.join();
IO.prototype.join = function() {
  return this.__value ? IO.of(null) : this.__value();
}

// 試試看
var foo = IO.of(IO.of("123"));

foo.join();

似乎這樣也有點麻煩， 每次都要使用一個join來剖析

var doSomething = compose(join, map(f), join, map(g), join, map(h));

我們可以使用一個chain函數(shù)， 來幫助我們做這些事

var chain = _.curry((f, functor) => functor.chain(f));
IO.prototype.chain = function(f) {
  return this.map(f).join();
}

// 現(xiàn)在可以這樣調(diào)用了
var doSomething = compose(chain(f), chain(g), chain(h));

// 當然，也可以這樣
someMonad.chain(f).chain(g).chain(h)

// 寫成這樣是不是很熟悉呢？
readFile("file")
    .chain(x => new IO(_ => {
        console.log(x);
        return x;
    }))
    .chain(x => new IO(_ => {
        // 對x做一些事情，然后返回
    }))

ok, 事實上這就是一個Monad， 而且你也會很熟悉， 這就像一個Promise的then， 那么什么是Monad呢？
Monad有一個bind方法， 就是上面講到的chain（同一個東西不同叫法），

function bind(instance: M, transform: (value: T) => M): M {
    // ...
}

// 這樣是行不通的，因為 2 和 3 都藏在瓶子里。
add(Container.of(2), Container.of(3));
//NaN

// 使用可靠的 map 函數(shù)試試
var container_of_add_2 = map(add, Container.of(2));
// Container(add(2))

Container.of(2).chain(function(two) {
  return Container.of(3).map(add(two));
});

Container.prototype.ap = function(other_container) {
  return other_container.map(this.__value);
}

Container.of(2).map(add).ap(Container.of(3));
// Container(5)

const liftA2 = (f, m1, m2) => m1.map(f).ap(m2)
liftA2(add, Container.of(2), Container.of(3))

// Http.get :: String -> Task Error HTML

var renderPage = curry(function(destinations, events) { /* render page */  });

Task.of(renderPage).ap(Http.get("/destinations")).ap(Http.get("/events"))
// Task("
some page with dest and events
")

// identity
map(id) === id;

// composition
compose(map(f), map(g)) === map(compose(f, g));

bind(unit(x), f) ≡ f(x)
bind(m, unit) ≡ m
bind(bind(m, f), g) ≡ bind(m, x ? bind(f(x), g))

Identity: A.of(x => x).ap(v) === v
Homomorphism: A.of(f).ap(A.of(x)) === A.of(f(x))
Interchange: u.ap(A.of(y)) === A.of(f => f(y)).ap(u)

面向?qū)ο髮?shù)據(jù)進行抽象，將行為以對象方法的方式封裝到數(shù)據(jù)實體內(nèi)部，從而降低系統(tǒng)的耦合度。而函數(shù)式編程，選擇對過程進行抽象，將數(shù)據(jù)以輸入輸出流的方式封裝進過程內(nèi)部，從而也降低系統(tǒng)的耦合度。兩者雖是截然不同，然而在系統(tǒng)設(shè)計的目標上可以說是殊途同歸的。
面向?qū)ο笏枷牒秃瘮?shù)式編程思想也是不矛盾的，因為一個龐大的系統(tǒng)，可能既要對數(shù)據(jù)進行抽象，又要對過程進行抽象，或者一個局部適合進行數(shù)據(jù)抽象，另一個局部適合進行過程抽象，這都是可能的。數(shù)據(jù)抽象不一定以對象實體為形式，同樣過程抽象也不是說形式上必然是 functional 的，比如流式對象（InputStream、OutputStream）、Express 的 middleware，就帶有明顯的過程抽象的特征。但是在通常情況下，OOP更適合用來做數(shù)據(jù)抽象，F(xiàn)P更適合用來做過程抽象。

const textColor = "red"
const comp = () => {
    return (
        

    )
}

說白了前端和后端不一樣的關(guān)鍵點是后端HTTP較多，前端渲染多，前端真正的剛需是數(shù)據(jù)綁定機制。后端一次對話，計算好Response發(fā)回就完成任務了，所以后端吃了二十年年MVC老本還是挺好用的。前端處理的是連續(xù)的時間軸，并非一次對話，像后端那樣賦值簡單傳遞就容易斷檔，導致狀態(tài)不一致，帶來大量額外復雜度和Bug。不管是標準FRP還是Mobx這種命令式API的TFRP，內(nèi)部都是基于函數(shù)式設(shè)計的。函數(shù)式重新發(fā)明的Return和分號是要比裸命令式好得多的（前端狀態(tài)可以同步，后端線程安全等等，想怎么封裝就怎么封裝）。

接上條，大幅簡化異步，IO，渲染等作用/副作用相關(guān)代碼。和很多人想象的不一樣，函數(shù)式很擅長處理作用，只是多一層抽象，如果應用稍微復雜一點，這點成本很快就能找回來（Redux Saga是個例子，特別是你寫測試的情況下）。渲染現(xiàn)在大家都可以理解冪等渲染地好處了，其實函數(shù)式編程各種作用和狀態(tài)也是冪等的，對于復雜應用非常有幫助。

引用透明，無副作用，代數(shù)設(shè)計讓函數(shù)式代碼可以正確優(yōu)雅地復用。前端不像后端業(yè)務固定，做好業(yè)務分析和DDD就可以搭個靜態(tài)結(jié)構(gòu)，高枕無憂了。前端的好代碼一定是活的，每處都可能亂改?？山M合性其實很重要。通過高階函數(shù)來組合效果和效率都要高于繼承，試著多用ramda，你就可以發(fā)現(xiàn)絕大部分東西都能一行寫完，最后給個實參就變成一個UI，來需求改兩筆就變成另外一個。