資訊專欄INFORMATION COLUMN
摘要：源碼解析模塊的代碼十分簡練，但是實(shí)現(xiàn)的作用卻是十分強(qiáng)大。只傳遞一個(gè)參數(shù)的時(shí)候，就直接把這個(gè)函數(shù)返回返回組合函數(shù)這就是對源碼的一個(gè)整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫
compose源碼解析
compose模塊的代碼十分簡練，但是實(shí)現(xiàn)的作用卻是十分強(qiáng)大。redux為何稱為redux？有人說就是reduce和flux的結(jié)合體，而reduce正是compose模塊的核心。
compose模塊所實(shí)現(xiàn)的功能強(qiáng)大而簡單：從右到左,組合參數(shù)(函數(shù))。所以，傳遞給compose方法的參數(shù)，必須都是函數(shù)類型的(這一點(diǎn)，在源碼中沒有判斷，可能是因?yàn)檫@個(gè)模塊是redux內(nèi)部使用的模塊，沒有對外暴露，所以不需要很強(qiáng)的校驗(yàn)。)。例如：
compose(f, g, h) ====> (...args) => f(g(h(...args)))
模塊的代碼很簡單，但是涉及到的內(nèi)容卻很重要，下面一點(diǎn)一點(diǎn)的看。
reduce是什么？
reduce是es5中的數(shù)組的一個(gè)方法，對累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。函數(shù)簽名為：
arr.reduce(callback[, initialValue])
callback是執(zhí)行數(shù)組中每個(gè)元素的函數(shù)，這個(gè)函數(shù)接收幾個(gè)參數(shù)：
accumulator:上一次callback調(diào)用的返回值，如果是第一次調(diào)用，則這個(gè)值就是initialValue。如果沒有提供initialValue則使用數(shù)組的第一個(gè)元素。
currentValue: 數(shù)組正在處理的元素
currentIndex: 數(shù)組正在處理的元素的當(dāng)前的索引
array: 調(diào)用reduce方法的數(shù)組
綜上，reduce方法詳細(xì)的簽名就是：
arr.reduce(function (accumulator, currentValue, currentIndex, array) {}[, initialValue])
幾個(gè)小Demo
數(shù)組求和
[1,2,3,4,5].reduce((a, b) => a + b) // 15
數(shù)組拉平
[[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
return a.concat(b);
}, []); // [ 0, 1, 2, 3, 4, 5 ]
關(guān)于reduce詳細(xì)的文檔可以參考Array.prototype.reduce
明白了reduce是怎么回事之后，我們先來看一下compose有什么神奇的效果：
import compose from "../src/compose"
// function f
const f = (arg) => `函數(shù)f(${arg})`
// function g
const g = (arg) => `函數(shù)g(${arg})`
// function h 最后一個(gè)函數(shù)可以接受多個(gè)參數(shù)
const h = (...arg) => `函數(shù)h(${arg.join("_")})`
const r = compose(f, g, h)
console.log(typeof r) // function
console.log(r(1,2,3)) //函數(shù)f(函數(shù)g(函數(shù)h(1_2_3)))
從上面可以的代碼可以看出：compose的運(yùn)行結(jié)果是一個(gè)函數(shù)，調(diào)用這個(gè)函數(shù)所傳遞的參數(shù)將會作為compose最后一個(gè)參數(shù)的參數(shù)，從而像"洋蔥圈"似的，由內(nèi)向外，逐步調(diào)用。
源碼
export default function compose(...funcs) {
// funcs是一個(gè)保存著所有參數(shù)函數(shù)的數(shù)組
// 如果沒有傳遞任何參數(shù)，就返回一個(gè)函數(shù)，這個(gè)函數(shù)是輸入什么得到什么。
if (funcs.length === 0) {
return arg => arg
}
// 只傳遞一個(gè)參數(shù)的時(shí)候，就直接把這個(gè)函數(shù)返回
if (funcs.length === 1) {
return funcs[0]
}
// 返回組合函數(shù)
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
這就是對compose源碼的一個(gè)整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注：redux源碼解讀倉庫
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89558.html
摘要：的中間件主要是通過模塊實(shí)現(xiàn)的。返回的也是一個(gè)對象這個(gè)其實(shí)就是，各個(gè)中間件的最底層第三層的哪個(gè)函數(shù)組成的圓環(huán)函數(shù)構(gòu)成的這就是對源碼的一個(gè)整體解讀，水平有限，歡迎拍磚。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫 applyMiddleware源碼解析 中間件機(jī)制在redux中是強(qiáng)大且便捷的，利用redux的中間件我們能夠?qū)崿F(xiàn)日志記錄，異步調(diào)用等多種十分實(shí)用的功能。redux的中間件主要是...
摘要：否則的話，認(rèn)為只是一個(gè)普通的，將通過也就是進(jìn)一步分發(fā)。在本組件內(nèi)的應(yīng)用傳遞給子組件源碼解析期待一個(gè)作為傳入，里面是如果只是傳入一個(gè)，則通過返回被綁定到的函數(shù)遍歷并通過分發(fā)綁定至將其聲明為的屬性之一接收的作為傳入。 原文鏈接：https://github.com/ecmadao/Co...轉(zhuǎn)載請注明出處 本文不涉及redux的使用方法，因此可能更適合使用過redux的玩家翻閱? 預(yù)熱...
摘要：主模塊的入口模塊就是。主要就做兩件事引入個(gè)功能模塊，并掛載至同一個(gè)對象上，對外暴露。在非環(huán)境下壓縮代碼，給予警告。后續(xù)的源碼解讀和測試?yán)涌梢躁P(guān)注源碼解讀倉庫 主模塊 redux的入口模塊就是src/index.js。這個(gè)文件的代碼十分簡單。主要就做兩件事： 引入個(gè)功能模塊，并掛載至同一個(gè)對象上，對外暴露。 在非production環(huán)境下壓縮代碼，給予警告。 下面是模塊的源碼(只包...
摘要：函數(shù)組合，科里化的串聯(lián)結(jié)合示例源碼，實(shí)現(xiàn)也很優(yōu)雅，對于返回的，將等參數(shù)傳遞進(jìn)去，然后執(zhí)行，等待回調(diào)異步完成再。對于正常對象則進(jìn)行下一步。前言 作為前端狀態(tài)管理器，這個(gè)比較跨時(shí)代的工具庫redux有很多實(shí)現(xiàn)和思想值得我們思考。在深入源碼之前，我們可以相關(guān)注下一些常見問題，這樣帶著問題去看實(shí)現(xiàn)，也能更加清晰的了解。 常見問題 大概看了下主要有這么幾個(gè)： redux三大原則 這個(gè)可以直接參考...
摘要：這里還有一個(gè)疑問點(diǎn)就是的嵌套，最開始也我不明白，看了源碼才知道，這里返回的也是接受也就是一個(gè)所以可以正常嵌套。以作為參數(shù)，調(diào)用上一步返回的函數(shù)以為參數(shù)進(jìn)行調(diào)用。 1、本文不涉及redux的使用方法，因此可能更適合使用過 redux 的同學(xué)閱讀2、當(dāng)前redux版本為4.0.13、更多系列文章請看 Redux作為大型React應(yīng)用狀態(tài)管理最常用的工具。雖然在平時(shí)的工作中很多次的用到了它...
閱讀 1281·2021-11-15 18:14
閱讀 3167·2021-08-25 09:38
閱讀 2673·2019-08-30 10:55
閱讀 2704·2019-08-29 16:39
閱讀 1316·2019-08-29 15:07
閱讀 2457·2019-08-29 14:14
閱讀 821·2019-08-29 12:36
閱讀 921·2019-08-29 11:21
