redux源碼解讀--compose源碼解析

lk20150415 發布于2019-08-21 17:28 / 1310人閱讀

摘要：源碼解析模塊的代碼十分簡練，但是實現的作用卻是十分強大。只傳遞一個參數的時候，就直接把這個函數返回返回組合函數這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續的源碼解讀和測試例子可以關注源碼解讀倉庫

compose源碼解析

compose模塊的代碼十分簡練，但是實現的作用卻是十分強大。redux為何稱為redux？有人說就是reduce和flux的結合體，而reduce正是compose模塊的核心。

compose模塊所實現的功能強大而簡單：從右到左,組合參數(函數)。所以，傳遞給compose方法的參數，必須都是函數類型的(這一點，在源碼中沒有判斷，可能是因為這個模塊是redux內部使用的模塊，沒有對外暴露，所以不需要很強的校驗。)。例如：

 compose(f, g, h) ====> (...args) => f(g(h(...args)))

模塊的代碼很簡單，但是涉及到的內容卻很重要，下面一點一點的看。

reduce是什么？

reduce是es5中的數組的一個方法，對累加器和數組中的每個元素（從左到右）應用一個函數，將其減少為單個值。函數簽名為：

arr.reduce(callback[, initialValue])

callback是執行數組中每個元素的函數，這個函數接收幾個參數：

accumulator:上一次callback調用的返回值，如果是第一次調用，則這個值就是initialValue。如果沒有提供initialValue則使用數組的第一個元素。

currentValue: 數組正在處理的元素

currentIndex: 數組正在處理的元素的當前的索引

array: 調用reduce方法的數組

綜上，reduce方法詳細的簽名就是：

arr.reduce(function (accumulator, currentValue, currentIndex, array) {}[, initialValue])

幾個小Demo

數組求和

[1,2,3,4,5].reduce((a, b) => a + b) // 15

數組拉平

[[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
  return a.concat(b);
}, []);  // [ 0, 1, 2, 3, 4, 5 ]

關于reduce詳細的文檔可以參考Array.prototype.reduce

明白了reduce是怎么回事之后，我們先來看一下compose有什么神奇的效果：

import compose from "../src/compose"

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

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

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

const r = compose(f, g, h)

console.log(typeof r) // function

console.log(r(1,2,3)) //函數f(函數g(函數h(1_2_3)))

從上面可以的代碼可以看出：compose的運行結果是一個函數，調用這個函數所傳遞的參數將會作為compose最后一個參數的參數，從而像"洋蔥圈"似的，由內向外，逐步調用。

源碼

export default function compose(...funcs) {
  // 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源碼的一個整體解讀，水平有限，歡迎拍磚。后續的源碼解讀和測試例子可以關注：redux源碼解讀倉庫

云服務器 GPU云服務器 redux源碼源碼解讀 webrtc源碼解讀 webrtc fec源碼解讀

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89558.html

redux源碼解讀--applyMiddleware源碼解析

摘要：的中間件主要是通過模塊實現的。返回的也是一個對象這個其實就是，各個中間件的最底層第三層的哪個函數組成的圓環函數構成的這就是對源碼的一個整體解讀，水平有限，歡迎拍磚。后續的源碼解讀和測試例子可以關注源碼解讀倉庫 applyMiddleware源碼解析中間件機制在redux中是強大且便捷的，利用redux的中間件我們能夠實現日志記錄，異步調用等多種十分實用的功能。redux的中間件主要是...

Atom 2019-08-22 13:35 評論0 收藏0
Redux 入坑進階 - 源碼解析

摘要：否則的話，認為只是一個普通的，將通過也就是進一步分發。在本組件內的應用傳遞給子組件源碼解析期待一個作為傳入，里面是如果只是傳入一個，則通過返回被綁定到的函數遍歷并通過分發綁定至將其聲明為的屬性之一接收的作為傳入。原文鏈接：https://github.com/ecmadao/Co...轉載請注明出處本文不涉及redux的使用方法，因此可能更適合使用過redux的玩家翻閱? 預熱...

BothEyes1993 2019-08-20 11:09 評論0 收藏0
redux源碼閱讀－－主模塊

摘要：主模塊的入口模塊就是。主要就做兩件事引入個功能模塊，并掛載至同一個對象上，對外暴露。在非環境下壓縮代碼，給予警告。后續的源碼解讀和測試例子可以關注源碼解讀倉庫主模塊 redux的入口模塊就是src/index.js。這個文件的代碼十分簡單。主要就做兩件事：引入個功能模塊，并掛載至同一個對象上，對外暴露。在非production環境下壓縮代碼，給予警告。下面是模塊的源碼(只包...

testHs 2019-08-21 17:23 評論0 收藏0
重讀redux源碼(二)

摘要：函數組合，科里化的串聯結合示例源碼，實現也很優雅，對于返回的，將等參數傳遞進去，然后執行，等待回調異步完成再。對于正常對象則進行下一步。前言作為前端狀態管理器，這個比較跨時代的工具庫redux有很多實現和思想值得我們思考。在深入源碼之前，我們可以相關注下一些常見問題，這樣帶著問題去看實現，也能更加清晰的了解。常見問題大概看了下主要有這么幾個： redux三大原則這個可以直接參考...

dingda 2019-05-23 13:54 評論0 收藏0
不一樣的redux源碼解讀

摘要：這里還有一個疑問點就是的嵌套，最開始也我不明白，看了源碼才知道，這里返回的也是接受也就是一個所以可以正常嵌套。以作為參數，調用上一步返回的函數以為參數進行調用。 1、本文不涉及redux的使用方法，因此可能更適合使用過 redux 的同學閱讀2、當前redux版本為4.0.13、更多系列文章請看 Redux作為大型React應用狀態管理最常用的工具。雖然在平時的工作中很多次的用到了它...

Salamander 2019-08-26 13:34 評論0 收藏0