react高階函數的概念是什么

本文小編為大家詳細介紹“react高階函數的概念是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“react高階函數的概念是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在react中，高階函數的定義是若一個指定的函數接收的參數是另一個函數或者調用的返回值依然是一個函數，那么這個指定的函數就被稱為高階函數；常見的高階函數有Promise、setTimeout、“arr.map()”等等。

本教程操作環境：Windows10系統、react17.0.1版、Dell G3電腦。

react高階函數的定義

高階函數：如果一個函數符合下面2個規范中的任何一個，那該函數就是高階函數。

1.若A函數，接收的參數是一個函數，那么A就可以稱之為高階函數。

2.若A函數，調用的返回值依然是一個函數，那么A就可以稱之為高階函數。

常見的高階函數有：Promise、setTimeout、arr.map()等等

示例如下：

以下案例就是高階函數

saveFormData = (event)=>{
return ()=>{
console.log('@');
}
}

<form onSubmit={this.handleSubmit}>
用戶名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
密碼：<input onChange={this.saveFormData('password')} type="password" name="password"/>
<button>登錄</button>
</form>

a、this.saveFormData(‘username’) 將saveFormData返回值作為onChange的回調，不是將saveFormData作為回調

b、如果使用 this.saveFormData('username') 那么saveFormData賦值函數必須返回東西給onChange 把saveFormData賦值函數返回值（返回的函數）交給onChange作為回調

c、所以我們在saveFormData的return函數里打印一下‘@’符號，那么就會把這個打印的值返回給onChange，在input框邊輸入邊打印@符號

d、saveFormData傳的dataType其實就是username和password

e、我們在輸入的時候調用的肯定是return函數 return才是真正的回調, react幫我回調的時候把event傳進去了 通過event.target.value可以取到我們輸出的值

saveFormData = (dataType)=>{
// console.log(dataType);
return (event)=>{
// console.log('@');
console.log(dataType,event.target.value);
}
}

f、可以輸出內容 我們可以用setState存到state里面去

this.setState({[dataType]:event.target.value})

讀到這里，這篇“react高階函數的概念是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。