? ? ? ? 此文章是本人在學(xué)習(xí)React的時(shí)候，寫(xiě)下的學(xué)習(xí)筆記，在此紀(jì)錄和分享。此為第九篇，主要介紹高階函數(shù)與函數(shù)柯里化。

高階函數(shù)，和函數(shù)的柯里化，是學(xué)習(xí)react的拓展，方便以后優(yōu)化代碼，更好的學(xué)習(xí)react。

目錄

高階函數(shù)

案例

高階函數(shù)定義?

函數(shù)的柯里化

函數(shù)柯里化的定義

柯里化小案例

不用柯里化的寫(xiě)法

---

高階函數(shù)

案例

先把上一筆記里面的案例，拿出來(lái)：這個(gè)案例就是，兩個(gè)輸入框分別是用戶(hù)名和密碼，輸入用戶(hù)名和密碼，點(diǎn)擊登錄按鈕，會(huì)彈出一個(gè)提示框，顯示你輸入的用戶(hù)名和密碼。

 <!-- 準(zhǔn)備好容器 --><div id="test1"></div><script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script><script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script><!-- 新引入的庫(kù)，用于限定props傳入值的類(lèi)型，propTypes --><script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script><script type="text/babel">class Login extends React.Component {//狀態(tài)初始化state = {username:'',//用戶(hù)名password:''//密碼}//保存用戶(hù)名到狀態(tài)中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密碼到狀態(tài)中savePassword = (event)=>{this.setState({password:event.target.value})}//表單提交的回調(diào)handleSubmit = (event) => {event.preventDefault()const {username,password} = this.statealert(`您輸入的用戶(hù)名是${username},輸入的密碼是${password}`)}render() {return (<form action="http://www.atguigu.com" onSubmit={this.handleSubmit}>用戶(hù)名：<input onChange = {this.saveUsername} type="text" name="username" />密碼：<input onChange = {this.savePassword} type="password" name="password" /><button>登錄</button></form>)}}ReactDOM.render(<Login />, document.getElementById('test1'))</script>

????????如代碼所示，表單中需要獲取用戶(hù)名和密碼，并且加以操作，所以有了對(duì)應(yīng)的兩個(gè)方法：saveUsername和savePassword。但如果還存在性別，年齡，電話(huà)號(hào)碼等等信息需要操作，是不是得一一對(duì)應(yīng)，寫(xiě)很多方法？實(shí)在是過(guò)于冗余，有沒(méi)有什么解決的辦法？

????????所以我們只寫(xiě)一個(gè)方法saveFormData來(lái)代替saveUsername和savePassword，來(lái)給表單中所有的屬性使用：

 用戶(hù)名：<input onChange = {this.saveFormData("username")} type="text" name="username" />密碼：<input onChange = {this.saveFormData("password")} type="password" name="password" />

saveFormData = (event)=>{this.setState({password:event.target.value})
}

????????但是，這會(huì)出現(xiàn)很大的錯(cuò)誤。注意onchange的回調(diào)函數(shù)，它非是一個(gè)函數(shù)進(jìn)行了回調(diào)，而是一個(gè)函數(shù)的返回結(jié)果進(jìn)行了回調(diào)：this.saveFormData("username")，saveFormData加了小括號(hào)，已經(jīng)在回調(diào)時(shí)執(zhí)行完了，產(chǎn)生了函數(shù)的返回值，這個(gè)返回值參與了回調(diào)，就會(huì)發(fā)生錯(cuò)誤。

? ? ? ? 必須將一個(gè)函數(shù)返回給onchange作為回調(diào)。

如下的寫(xiě)法，才是onchange事件觸發(fā)時(shí)候，回調(diào)saveFormData這個(gè)函數(shù)。

<input onChange = {this.saveFormData} 

? ? ? ? 而且這個(gè)saveFromData函數(shù)，this.setState也會(huì)一直把數(shù)據(jù)給password。我們接下來(lái)修改這些錯(cuò)誤。

? ? ? ? 那么怎么才能在加（）的情況下，也能正確執(zhí)行回調(diào)函數(shù)呢。眾所周知函數(shù)加了（）就是執(zhí)行函數(shù)產(chǎn)生返回值，那么我們直接讓返回值是一個(gè)函數(shù)不就行了。

改寫(xiě)這個(gè)saveFromData函數(shù)：

//保存表單數(shù)據(jù)到狀態(tài)中
saveFormData = (dataType) => {return (event) => {this.setState({[dataType]: event.target.value})}
}

????????我們將saveFromData函數(shù)的返回值，寫(xiě)成了一個(gè)函數(shù)。如此一來(lái)，onchange事件觸發(fā)后，回調(diào)saveFromData函數(shù)的返回值，仍然是一個(gè)函數(shù)，便能達(dá)到正常的效果。

????????我們?cè)趏nChange={this.saveFormData("username")}中傳入?yún)?shù)，在saveFromData函數(shù)設(shè)置形參dataType接收這個(gè)參數(shù)，在this.setState中以中括號(hào)包裹形參（中括號(hào)表示其中是是一個(gè)變量，不寫(xiě)中括號(hào)會(huì)當(dāng)作一個(gè)鍵名），設(shè)置state，這樣就可以區(qū)分?jǐn)?shù)據(jù)，在state中分開(kāi)保存不同的數(shù)據(jù)。

來(lái)看效果：

高階函數(shù)定義?

高階函數(shù)：如果一個(gè)函數(shù)符合下面兩個(gè)規(guī)范中的任何一個(gè)，那該函數(shù)就是高階函數(shù)。

? ? ? ? 1.若A函數(shù)，接收的參數(shù)是一個(gè)函數(shù)，那么A就可以被稱(chēng)為高階函數(shù)。

? ? ? ? 2.若A函數(shù)，調(diào)用的返回值依然是一個(gè)函數(shù)，那么A就可以被稱(chēng)為高階函數(shù)。

由此可見(jiàn)：saveFromData函數(shù)就是一個(gè)高階函數(shù)，調(diào)用的返回值是一個(gè)函數(shù)。

常見(jiàn)的高階函數(shù)，如promise，數(shù)組迭代的那幾種方法，定時(shí)器。

函數(shù)的柯里化

函數(shù)柯里化的定義

函數(shù)的柯里化：通過(guò)函數(shù)調(diào)用繼續(xù)返回函數(shù)的方式，實(shí)現(xiàn)多次接收參數(shù)最后統(tǒng)一處理的函數(shù)編碼形式。

柯里化小案例

為了理解柯里化，我們先正常的寫(xiě)一個(gè)普通函數(shù)的案例：a,b,c 的求和

function sum(a,b,c){return a+b+c}const result = sum(1,2,3)console.log(result);

現(xiàn)在把上面的案例，改成柯里化的寫(xiě)法：

 function sum(a) {return (b) => {return (c) => {return a + b + c}}}const result = sum(1)(2)(3)console.log(result);

這個(gè)案例里面的函數(shù)柯里化，看似把簡(jiǎn)單的問(wèn)題復(fù)雜化，變得麻煩，又有些回調(diào)地獄的風(fēng)格。但實(shí)際應(yīng)用上，函數(shù)柯里化經(jīng)常使用。比如說(shuō)第一個(gè)案例，里面的saveFromData函數(shù)：

saveFormData = (dataType) => {return (event) => {this.setState({[dataType]: event.target.value})}}

先接收了參數(shù)dataType，然后再接收了event參數(shù)，在后面對(duì)兩個(gè)參數(shù)統(tǒng)一處理了，這就是函數(shù)的柯里化。

不用柯里化的寫(xiě)法

????????如果我們不用柯里化的寫(xiě)法，這就要求我們一次性拿到所有參數(shù)。主要是在onchange事件里，想辦法把兩個(gè)參數(shù)一次性給saveFromData函數(shù)傳過(guò)去。

? ? ? ? 給onchange事件回調(diào)的，必須是一個(gè)函數(shù)。我們嘗試寫(xiě)一個(gè)內(nèi)聯(lián)函數(shù)，這樣既能在內(nèi)聯(lián)函數(shù)中把參數(shù)傳遞給saveFromData函數(shù)，又可以保證是一個(gè)函數(shù)回調(diào)給事件。

如下：onChange={(event)=>{this.saveFormData('username',event.target.value)}}

用戶(hù)名：<input onChange={(event)=>{this.saveFormData('username',event)}} type="text" name="username" />
密碼：<input onChange={(event)=>{this.saveFormData('password',event)}} type="password" name="password" />

然后我們就可以把saveFromData函數(shù)改寫(xiě)成一個(gè)普通的函數(shù)：

saveFormData = (dataType, event) => {this.setState({[dataType]: event.target.value})}

如此，我們改寫(xiě)了這兩個(gè)部分，就可以把柯里化寫(xiě)法，改成普通的函數(shù)寫(xiě)法。