react中事件處理與柯里化的實(shí)現(xiàn)
1. 事件處理
React 中元素也可接受、處理事件,但是在語(yǔ)法上有一點(diǎn)不同。
在React 中所有事件的命名采用的是小駝峰,而非原生 DOM 的純小寫(xiě),所有事件需要我們傳入一個(gè)函數(shù),而非字符串。
例如:
const Button = () => { const handleClick = () => { console.log('click') } return <button onClick={handleClick}>click button</button> }
當(dāng)事件的回調(diào)函數(shù)比較簡(jiǎn)單時(shí),我們也可以簡(jiǎn)寫(xiě)箭頭匿名函數(shù),例如:
const Button = () => { return ( <button onClick={() => console.log('click')} > click button </button>) }
阻止默認(rèn)行為
在React 中不能通過(guò)返回 false
來(lái)阻止默認(rèn)行為,例如表單提交、a標(biāo)簽跳轉(zhuǎn)。我們必須要通過(guò)顯式調(diào)用 preventDefault
函數(shù),來(lái)阻止這些默認(rèn)行為。
const Link = () => { return <a rel="external nofollow" rel="external nofollow" onClick={(e) => e.preventDefault()} > link </a> }
合成事件
在 React 中幾乎所有的事件處理函數(shù),都是一個(gè) (event)=>void
函數(shù),如果我們使用 typescript,可以清晰的看到每個(gè)事件對(duì)應(yīng)的函數(shù)類型,React 自身也聲明了很多的事件與事件處理函數(shù)類型,例如鼠標(biāo)事件:MouseEvent<T = Element>
與 MouseEventHandler<T = Element>
,我們?cè)谑褂脮r(shí)可以根據(jù)自己的喜歡,是定義函數(shù)類型還是定義參數(shù)類型,就像這樣:
const Link = () => { const handleClick = (e: MouseEvent) => { e.preventDefault() console.log('click') } const handleMouseEnter:MouseEventHandler = (e) => { console.log('mouse enter') } return <a rel="external nofollow" rel="external nofollow" onMouseEnter={handleMouseEnter} onClick={handleClick} > link </a> }
在 React 中,所有事件都是 React 根據(jù) W3C 規(guī)范定義的合成事件,所以我們完全不用擔(dān)心兼容性問(wèn)題,React 事件與原生事件不完全相同。
2. 柯里化
柯里化這個(gè)名稱對(duì)于 Android 開(kāi)發(fā)可能有點(diǎn)陌生,因?yàn)槲覀円话闶褂?Java 開(kāi)發(fā),因?yàn)樵缙诘?Java 不支持函數(shù)式編程(FP),而柯里化是一個(gè)函數(shù)式編程思想。
簡(jiǎn)而言之是將一個(gè)多參函數(shù)變成單參數(shù)函數(shù),舉個(gè)栗子:
//柯里化后的單參數(shù)函數(shù) function sumCurrying(a) { return (b) => { return (c) => { return a + b + c; }; }; } //普通的多參數(shù)函數(shù) function sumNormal(a, b, c) { return a + b + c } console.log(sumCurrying(1)(2)(3)); console.log(sumNormal(1, 2, 3));
柯里化的本質(zhì),就是高階函數(shù)的一個(gè)特性:函數(shù)的返回值可以是一個(gè)函數(shù)。
上面的例子,似乎有點(diǎn)脫褲子放屁,看似毫無(wú)意義。但實(shí)際工程中,柯里化是一個(gè)非常實(shí)用的小 trick。最常用在事件處理需要傳入值的場(chǎng)景。
我們?cè)谏厦嬲f(shuō)過(guò)了,React 中的事件回調(diào)函數(shù)是有固定的函數(shù)類型的,幾乎都是 (event)=>void
函數(shù)。我們需要傳入一些參數(shù)給這個(gè)事件處理函數(shù)呢?
const List = () => { const list = [ { id: 1, name: 'tom' }, { id: 2, name: 'jerry' }, { id: 3, name: 'jack' }, { id: 4, name: 'lily' }, ] const handleClick = (id: number) => { console.log(id) } return <ul> {list.map(item => <li onClick={() => handleClick(item.id)} key={item.id} > {item.name} </li> )} </ul> }
這看起來(lái)似乎很不優(yōu)雅,我們已經(jīng)聲明了 handle 函數(shù),卻又不得不在事件處理函數(shù)中寫(xiě)行內(nèi)的箭頭函數(shù),如何才能更加優(yōu)雅的處理呢?
其實(shí)很簡(jiǎn)單,我們只需要在原本的 handle 函數(shù)中,插入一個(gè)箭頭即可,就像這樣:
//before const handleClick = (id: number) => { console.log(id) } //after const handleClick = (id: number) => (e:MouseEvent) => { console.log(id) }
然后我們的 onClick 事件回調(diào)函數(shù)就可以改成 onClick={handleClick(item.id)}
,這樣看起來(lái)是不是就更加優(yōu)雅了呢?
其實(shí)這種設(shè)計(jì)思想可以說(shuō)是一說(shuō)就透,只不過(guò)我現(xiàn)在告訴你,這種思想就叫做:柯里化。
柯里化的目的
你可能會(huì)問(wèn)我柯里化看起來(lái)只是讓我們的代碼優(yōu)雅了一點(diǎn),在目前看來(lái)似乎沒(méi)有什么本質(zhì)上的變化。
但其實(shí)柯里化幫助我們實(shí)現(xiàn)了函數(shù)的一變多,我們用一個(gè)日志輸出的函數(shù)作為例子:
//原始函數(shù) const log = (date, importance, message) => { alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`); } //柯里化 const logCurry = (date) => (importance) => (message) => { alert(`[${date.getHours()}:${date.getMinutes()}] [${importance}] ${message}`); }
柯里化后,函數(shù)變成這樣調(diào)用:logCurry(new Date())("DEBUG")("some debug");
現(xiàn)在我們相當(dāng)于擁有這些函數(shù):
// logNow 會(huì)是帶有固定第一個(gè)參數(shù)的日志的函數(shù) let logNow = logCurry(new Date()); // 使用它 logNow("INFO", "message"); // [HH:mm] INFO message // debugNow 會(huì)是帶有固定第一個(gè)參數(shù)與第二個(gè)參數(shù)的函數(shù) let debugNow = logNow("DEBUG"); debugNow("message"); // [HH:mm] DEBUG message
看起來(lái)只是增加了幾個(gè)箭頭,實(shí)際上我們函數(shù)的靈活性大為增加。通過(guò)固定不同的參數(shù),我們從一個(gè)函數(shù)聲明獲得了多個(gè)函數(shù)。
一個(gè)簡(jiǎn)單的例子
const Form = () => { const [form, setForm] = React.useState({}); const update = (name) => (event) => { setForm({ ...form, [name]: event.target.value, }); } const handleSubmit = (event) => { event.preventDefault(); alert(`${JSON.stringify(form)}`); } return ( <div> <h1>柯里化表單</h1> <FormItem label="用戶名" name='username' update={update} /> <FormItem label="昵稱" name='nickname' update={update} /> <FormItem label="郵箱" name='email' update={update} /> <button onClick={handleSubmit}>提交</button> </div> ) } const FormItem = ({ label, name, update }) => { return ( <div style={{ 'display': 'flex' }}> <label>{label}</label> <input onChange={update(name)} type="text" placeholder={`請(qǐng)輸入${label}`} /> </div> ); };
到此這篇關(guān)于react中事件處理與柯里化的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react 事件處理與柯里化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個(gè)字符串按照指定的分隔符進(jìn)行分割成數(shù)組時(shí),我們可以在組件的生命周期方法中使用split方法來(lái)實(shí)現(xiàn)這個(gè)功能,本文就來(lái)介紹一下,感興趣的可以了解下2023-10-10淺談React Router關(guān)于history的那些事
這篇文章主要介紹了淺談React Router關(guān)于history的那些事,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04用React實(shí)現(xiàn)一個(gè)完整的TodoList的示例代碼
本篇文章主要介紹了用React實(shí)現(xiàn)一個(gè)完整的TodoList的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10react性能優(yōu)化達(dá)到最大化的方法 immutable.js使用的必要性
這篇文章主要為大家詳細(xì)介紹了react性能優(yōu)化達(dá)到最大化的方法,一步一步優(yōu)化react性能的過(guò)程,告訴大家使用immutable.js的必要性,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03React生命周期方法之componentDidMount的使用
這篇文章主要介紹了React生命周期方法之componentDidMount的使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06React中useLayoutEffect鉤子使用場(chǎng)景詳解
這篇文章主要為大家介紹了React中useLayoutEffect鉤子使用場(chǎng)景詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12