在react中，柯里化是一種關於函數的高階技術，指的是透過函數繼續傳回函數的方式，實現多次接收參數最後統一處理的函數編碼形式；柯里化不會呼叫函數，只是對函數進行轉換，透過柯里化處理表單時，可以輕鬆的取得表單控制項資料。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
函數的柯里化:
透過函數呼叫繼續傳回函數的方式,實作多次接受參數最後統一處理的函數編碼形式.
擴展：
高階函數: 若函數符合下面兩個規範中的一個,該函數就是高階函數
1.若a函數,接受的參數是一個函數,那麼a就可以稱為高階函數
2.若a函數,調用的返回值依舊是一個函數,那麼a就可以稱為高階函數
3.常見的高階函數有:promise,setTimeout,arr.map等
範例如下;
#在form表單中,使用受控元件綁定狀態數據，實現點擊顯示表單數據：
import React, {Component} from 'react';
export default class Form extends Component{
state = {
userName: '',
password: ''
}
submitForm = (event) => {
event.preventDefault() //阻止表单提交
const {userName, password } = this.state;
alert(`${userName}, ${password}`)
}
updateUserName = (event) => {
this.setState({
userName: event.target.value,
})
}
updatePassword = (event) => {
this.setState({
password: event.target.value,
})
}
render() {
return (
<form onSubmit={this.submitForm}>
用户名:<input type="text" name="userName" onChange={this.updateUserName}/>
密码: <input type="password" name="password" onChange={this.updatePassword}/>
<button>登录</button>
</form>
)
}
}可以看到，這種方法對於表單項目多的情況比較繁瑣，可以利用函數柯里化來最佳化：
import React, {Component} from 'react';
export default class Form extends Component{
state = {
userName: '',
password: ''
}
submitForm = (event) => {
event.preventDefault() //阻止表单提交
const {userName, password } = this.state;
alert(`${userName}, ${password}`)
}
updateFormData = (key) => {
return (event) => {
this.setState({
[key]: event.target.value,
})
}
}
render() {
return (
<form onSubmit={this.submitForm}>
用户名:<input type="text" name="userName" onChange={this.updateFormData('userName')}/>
密码: <input type="password" name="password" onChange={this.updateFormData('password')}/>
<button>登录</button>
</form>
)
}
}this.updateFormData()的回傳值是一個回呼函數，綁定為onChange的事件，參數為event。這樣就可以在初次呼叫時傳遞類型，觸發改變事件時傳值了。
不使用函數柯里化的實作
直接在onChange事件綁定為回調，可以實現同時傳遞類型和值兩個參數。
import React, {Component} from 'react';
export default class Form extends Component{
state = {
userName: '',
password: ''
}
submitForm = (event) => {
event.preventDefault() //阻止表单提交
const {userName, password } = this.state;
alert(`${userName}, ${password}`)
}
updateFormData = (key, event) => {
this.setState({
[key]: event.target.value,
})
}
render() {
return (
<form onSubmit={this.submitForm}>
用户名:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', event)}/>
密码: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/>
<button>登录</button>
</form>
)
}
}【相關推薦：javascript影片教學、web前端】
以上是什麼是react柯里化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
