摘要:使用匿名函數(shù)先上代碼代碼點擊的事件響應函數(shù)是一個匿名函數(shù),這應該是最常見的處理事件響應的方式了。事件響應函數(shù)的傳參問題事件響應函數(shù)默認是會被傳入一個事件對象作為參數(shù)的。關于事件響應函數(shù),還有一個地方需要注意。
</>復制代碼
React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深對React的理解,以及在項目中更加靈活地使用React。
Web應用中,事件處理是重要的一環(huán),事件處理將用戶的操作行為轉(zhuǎn)換為相應的邏輯執(zhí)行或界面更新。在React中,處理事件響應的方式有多種,本文將詳細介紹每一種處理方式的用法、使用場景和優(yōu)缺點。
使用匿名函數(shù)先上代碼:
</>復制代碼
//代碼1
class MyComponent extends React.Component {
render() {
return (
Click
);
}
}
點擊Button的事件響應函數(shù)是一個匿名函數(shù),這應該是最常見的處理事件響應的方式了。這種方式的好處是,簡單直接。哪里需要處理事件響應,就在哪里定義一個匿名函數(shù)處理。代碼1中的匿名函數(shù)使用的是箭頭函數(shù),我們也可以不使用箭頭函數(shù):
</>復制代碼
//代碼2
class MyComponent extends React.Component {
render() {
return (
Click
);
}
}
雖然代碼2的運行效果和代碼1相同,但實際項目中很少見到代碼2的這種寫法。這是因為箭頭函數(shù)解決了this綁定的問題,可以將函數(shù)體內(nèi)的this綁定到當前對象,而不是運行時調(diào)用函數(shù)的對象。如果響應函數(shù)中需要使用this.state,那么代碼2就無法正常運行了。所以項目中一般直接使用箭頭函數(shù)定義的匿名函數(shù)作為事件響應。
使用匿名函數(shù)的缺點是:當事件響應邏輯比較復雜時,匿名函數(shù)的代碼量會很大,會導致render函數(shù)變得臃腫,不容易直觀地看出組件最終渲染出的元素結(jié)構(gòu)。另外,每次render方法調(diào)用時,都會重新創(chuàng)建一個匿名函數(shù)對象,帶來額外的性能開銷,當組件的層級越低時,這種開銷就越大,因為任何一個上層組件的變化都可能會觸發(fā)這個組件的render方法。當然,在大多數(shù)情況下,這點性能損失是可以不必在意的。
使用組件方法代碼如下:
</>復制代碼
//代碼3
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {number: 0};
this.handleClick = this.handleClick.bind(this); // 手動綁定this
}
handleClick() {
this.setState({
number: ++this.state.number
});
}
render() {
return (
{this.state.number}
Click
);
}
}
點擊Button的事件響應函數(shù)是組件的方法:handleClick。這種方式的好處是:每次render方法的調(diào)用,不會重新創(chuàng)建一個新的事件響應函數(shù),沒有額外的性能損失。但是,使用這種方式要在構(gòu)造函數(shù)中為作為事件響應的方法(handleClick),手動綁定this: this.handleClick = this.handleClick.bind(this),這是因為ES6 語法的緣故,ES6 Class 的方法默認不會把this綁定到當前的實例對象上,需要我們手動綁定。每次都手動綁定this是不是有點繁瑣?好吧,讓我們來看下一種方式。
使用屬性初始化語法使用ES7的屬性初始化語法( property initializers ),代碼可以這樣寫:
</>復制代碼
//代碼4
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {number: 0};
}
handleClick = () => {
this.setState({
number: ++this.state.number
});
}
render() {
return (
{this.state.number}
Click
);
}
}
這樣一來,再也不用手動綁定this了。但是你需要知道,這個特性還處于試驗階段,默認是不支持的。如果你是使用官方腳手架Create React App 創(chuàng)建的應用,那么這個特性是默認支持的。你也可以自行在項目中引入babel的transform-class-properties插件獲取這個特性支持。
事件響應函數(shù)的傳參問題事件響應函數(shù)默認是會被傳入一個事件對象Event作為參數(shù)的。如果想傳入其他參數(shù)給響應函數(shù)應該怎么辦呢?
使用第一種方式的話很簡單,直接使用新參數(shù):
</>復制代碼
//代碼5
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [1,2,3,4],
current: 1
};
}
handleClick(item,event) {
this.setState({
current: item
});
}
render() {
return (
- {this.state.list.map(
- (item)=>(
-
- this.handleClick(item, event)}>{item}
-
- )
- )}
-
);
}
}
onClick的響應函數(shù)中,方法體內(nèi)可以直接使用新的參數(shù)item。
使用第二種方式的話,可以把綁定this的操作延遲到render中,在綁定this的同時,綁定額外的參數(shù):
</>復制代碼
//代碼6
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [1,2,3,4],
current: 1
};
}
handleClick(item) {
this.setState({
current: item
});
}
render() {
return (
- {this.state.list.map(
- (item)=>(
-
- {item}
-
- )
- )}
-
);
}
}
使用第三種方式,解決方案和第二種基本一致:
</>復制代碼
//代碼7
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [1,2,3,4],
current: 1
};
}
handleClick = (item) => {
this.setState({
current: item
});
}
render() {
return (
- {this.state.list.map(
- (item)=>(
-
- {item}
-
- )
- )}
-
);
}
}
不過這種方式就有點雞肋了,因為雖然你不需要通過bind函數(shù)綁定this,但仍然要使用bind函數(shù)來綁定其他參數(shù)。
關于事件響應函數(shù),還有一個地方需要注意。不管你在響應函數(shù)中有沒有顯式的聲明事件參數(shù)Event,React都會把事件Event作為參數(shù)傳遞給響應函數(shù),且參數(shù)Event的位置總是在其他自定義參數(shù)的后面。例如,在代碼6和代碼7中,handleClick的參數(shù)中雖然沒有聲明Event參數(shù),但你依然可以通過arguments[1]獲取到事件Event對象。
總結(jié)一下,三種事件處理的方式,第一種有額外的性能損失;第二種需要手動綁定this,代碼量增多;第三種用到了ES7的特性,目前并非默認支持,需要Babel插件的支持,但是寫法最為簡潔,也不需要手動綁定this。一般推薦使用第二種和第三種方式。
下篇預告:React 深入系列6:高階組件
我的新書《React進階之路》已上市,請大家多多支持!
鏈接:京東 當當
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/95197.html
摘要:因為是深入系列文章,本文不會仔細介紹每個生命周期方法的使用,而是會重點講解在使用組件生命周期時,經(jīng)常遇到的疑問和錯誤使用方式。父組件發(fā)生更新導致的組件更新,生命周期方法的調(diào)用情況同上所述。 文:徐超,《React進階之路》作者授權(quán)發(fā)布,轉(zhuǎn)載請注明作者及出處 React 深入系列4:組件的生命周期 React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深...
摘要:因為是深入系列文章,本文不會仔細介紹每個生命周期方法的使用,而是會重點講解在使用組件生命周期時,經(jīng)常遇到的疑問和錯誤使用方式。父組件發(fā)生更新導致的組件更新,生命周期方法的調(diào)用情況同上所述。 React 深入系列,深入講解了React中的重點概念、特性和模式等,旨在幫助大家加深對React的理解,以及在項目中更加靈活地使用React。 組件是構(gòu)建React應用的基本單位,組件需要具備數(shù)據(jù)...
摘要:以我自己的理解,函數(shù)式編程就是以函數(shù)為中心,將大段過程拆成一個個函數(shù),組合嵌套使用。越來越多的跡象表明,函數(shù)式編程已經(jīng)不再是學術界的最愛,開始大踏步地在業(yè)界投入實用。也許繼面向?qū)ο缶幊讨螅瘮?shù)式編程會成為下一個編程的主流范式。 使用React也滿一年了,從剛剛會使用到逐漸探究其底層實現(xiàn),以便學習幾招奇技淫巧從而在自己的代碼中使用,寫出高效的代碼。下面整理一些知識點,算是React看書...
摘要:感謝王下邀月熊分享的前端每周清單,為方便大家閱讀,特整理一份索引。王下邀月熊大大也于年月日整理了自己的前端每周清單系列,并以年月為單位進行分類,具體內(nèi)容看這里前端每周清單年度總結(jié)與盤點。 感謝 王下邀月熊_Chevalier 分享的前端每周清單,為方便大家閱讀,特整理一份索引。 王下邀月熊大大也于 2018 年 3 月 31 日整理了自己的前端每周清單系列,并以年/月為單位進行分類,具...
閱讀 1989·2021-11-24 09:39
閱讀 984·2021-11-11 16:55
閱讀 1439·2021-10-09 09:43
閱讀 1421·2021-10-08 10:17
閱讀 1658·2021-08-25 09:41
閱讀 430·2019-08-30 13:02
閱讀 632·2019-08-29 15:14
閱讀 1010·2019-08-29 13:53