首頁 > web前端 > 前端問答 > react高階函數的定義是什麼

react高階函數的定義是什麼

WBOY
發布: 2022-06-28 10:26:57
原創
2163 人瀏覽過

在react中,高階函數的定義是若一個指定的函數接收的參數是另一個函數或是呼叫的返回值仍然是一個函數,那麼這個指定的函數就被稱為高階函數;常見的高階函數有Promise、setTimeout、「arr.map()」等等。

react高階函數的定義是什麼

本教學操作環境: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(&#39;username&#39;)} type="text" name="username"/>
密码:<input onChange={this.saveFormData(&#39;password&#39;)} 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框邊輸入邊印@符號

react高階函數的定義是什麼

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

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

saveFormData = (dataType)=>{
// console.log(dataType);
return (event)=>{
// console.log(&#39;@&#39;);
console.log(dataType,event.target.value);
}
}
登入後複製

react高階函數的定義是什麼

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

this.setState({[dataType]:event.target.value})
登入後複製

【相關推薦:javascript影片教學web前端

以上是react高階函數的定義是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板