react中的compose()

首先來看reduce方法()

這是一個數組的方法。

arr.reduce(callback[, initialValue])

callback執行數組中每個值的函數，包含四個參數：

• accumulator(累加器)
• currentValue(當前值)
• currentIndex可選（當前索引）
• array可選（數組）
• initialValue可選（初始值）

廢話不多說 直接看代碼

var sum = [0, 1, 2, 3].reduce(function (a, b) {
  return a + b;
}, 0);
//6

var series = ["a1", "a3", "a1", "a5", "a7", "a1", "a3", "a4", "a2", "a1"];
var result = series.reduce(function (accumulator, current) {
  if (current in accumulator) {
    accumulator[current]++;
  } else {
    accumulator[current] = 1;
  }
  return accumulator;
}, {});

console.log(JSON.stringify(result));
// {"a1":4,"a3":2,"a5":1,"a7":1,"a4":1,"a2":1}

var a = [1, 1, 2, 3, 4, 4, 5, 6, 6, 6, 7];
Array.prototype.duplicate = function () {
  return this.reduce(function (cal, cur) {
    if (cal.indexOf(cur) === -1) {
      cal.push(cur);
    }
    return cal;
  }, []);
};

var newArr = a.duplicate();
// [1,2,3,4,5,6,7]

來理解compose函數

理解完了數組的reduce方法之后，就很容易理解compose函數了，因為實際上compose就是借助於reduce來實現的。看下官方源碼：

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

compose的返回值還是一個函數，調用這個函數所傳遞的參數將會作為compose最后一個參數的參數，從而像’洋蔥圈’似的，由內向外，逐步調用。

看下面的例子：

import { compose } 'redux'；

// function f
const f = (arg) => `函數f(${arg})` 

// function g
const g = (arg) => `函數g(${arg})`

// function h 最后一個函數可以接受多個參數
const h = (...arg) => `函數h(${arg.join('_')})`

console.log(compose(f,g,h)('a', 'b', 'c')) //函數f(函數g(函數h(a_b_c)))

所以最后返回的就是這樣的一個函數compose(fn1, fn2, fn3) (...args) = > fn1(fn2(fn3(...args)))

說白了就是剝洋蔥，吃卷心菜