快捷導(dǎo)航

react中事件處理與柯里化的實(shí)現(xiàn)

更新時(shí)間：2022年05月24日 09:20:39 作者：Junerver

本文主要介紹了react中事件處理與柯里化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1. 事件處理

React 中元素也可接受、處理事件，但是在語(yǔ)法上有一點(diǎn)不同。

在React 中所有事件的命名采用的是小駝峰，而非原生 DOM 的純小寫，所有事件需要我們傳入一個(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)寫箭頭匿名函數(shù)，例如：

const Button = () => {
    return (
        <button
            onClick={() => console.log('click')}
        >
            click button
        </button>)
}

阻止默認(rèn)行為

在React 中不能通過返回 false 來(lái)阻止默認(rèn)行為，例如表單提交、a標(biāo)簽跳轉(zhuǎn)。我們必須要通過顯式調(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)心兼容性問題，React 事件與原生事件不完全相同。

點(diǎn)擊此處查看合成事件文檔

2. 柯里化

柯里化這個(gè)名稱對(duì)于 Android 開發(fā)可能有點(diǎn)陌生，因?yàn)槲覀円话闶褂?Java 開發(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過了，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ù)中寫行內(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ì)思想可以說是一說就透，只不過我現(xiàn)在告訴你，這種思想就叫做：柯里化。

柯里化的目的

你可能會(huì)問我柯里化看起來(lái)只是讓我們的代碼優(yōu)雅了一點(diǎn)，在目前看來(lá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ù)的靈活性大為增加。通過固定不同的參數(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: