React學(xué)習(xí)之事件綁定的幾種方法對比

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:29:07

React學(xué)習(xí)之事件綁定的幾種方法對比

React學(xué)習(xí)之事件綁定的幾種方法對比:前言本文主要給大家介紹了關(guān)于React事件綁定的幾種方法對比的相關(guān)呢榮，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。 React事件綁定由于類的方法默認(rèn)不會(huì)綁定this，因此在調(diào)用的時(shí)候如果忘記綁定，this的值將會(huì)是undefined

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀React學(xué)習(xí)之事件綁定的幾種方法對比:前言本文主要給大家介紹了關(guān)于React事件綁定的幾種方法對比的相關(guān)呢榮，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。 React事件綁定由于類的方法默認(rèn)不會(huì)綁定this，因此在調(diào)用的時(shí)候如果忘記綁定，this的值將會(huì)是undefined

前言

本文主要給大家介紹了關(guān)于React事件綁定的幾種方法對比的相關(guān)呢榮，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

React事件綁定

由于類的方法默認(rèn)不會(huì)綁定this，因此在調(diào)用的時(shí)候如果忘記綁定，this的值將會(huì)是undefined。

通常如果不是直接調(diào)用，應(yīng)該為方法綁定this。綁定方式有以下幾種：

1. 在構(gòu)造函數(shù)中使用bind綁定this

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
 <button onClick={this.handleClick}>
 Click me
 </button>
 );
 }
}

2. 在調(diào)用的時(shí)候使用bind綁定this

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
 <button onClick={this.handleClick.bind(this)}>
 Click me
 </button>
 );
 }
}

3. 在調(diào)用的時(shí)候使用箭頭函數(shù)綁定this

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
 <button onClick={()=>this.handleClick()}>
 Click me
 </button>
 );
 }
}

4. 使用屬性初始化器語法綁定this(實(shí)驗(yàn)性)

class Button extends React.Component {
 handleClick=()=>{
 console.log('this is:', this);
 }
 render() {
 return (
 <button onClick={this.handleClick}>
 Click me
 </button>
 );
 }
}

比較

方式2和方式3都是在調(diào)用的時(shí)候再綁定this。

優(yōu)點(diǎn)：寫法比較簡單，當(dāng)組件中沒有state的時(shí)候就不需要添加類構(gòu)造函數(shù)來綁定this

缺點(diǎn)：每一次調(diào)用的時(shí)候都會(huì)生成一個(gè)新的方法實(shí)例，因此對性能有影響，并且當(dāng)這個(gè)函數(shù)作為屬性值傳入低階組件的時(shí)候，這些組件可能會(huì)進(jìn)行額外的重新渲染，因?yàn)槊恳淮味际切碌姆椒▽?shí)例作為的新的屬性傳遞。

方式1在類構(gòu)造函數(shù)中綁定this，調(diào)用的時(shí)候不需要再綁定

優(yōu)點(diǎn)：只會(huì)生成一個(gè)方法實(shí)例，并且綁定一次之后如果多次用到這個(gè)方法也不需要再綁定。

缺點(diǎn)：即使不用到state，也需要添加類構(gòu)造函數(shù)來綁定this，代碼量多一點(diǎn)。。

方式4：利用屬性初始化語法，將方法初始化為箭頭函數(shù)，因此在創(chuàng)建函數(shù)的時(shí)候就綁定了this。

優(yōu)點(diǎn)：創(chuàng)建方法就綁定this，不需要在類構(gòu)造函數(shù)中綁定，調(diào)用的時(shí)候不需要再作綁定。結(jié)合了方式1、方式2、方式3的優(yōu)點(diǎn)

缺點(diǎn)：目前仍然是實(shí)驗(yàn)性語法，需要用babel轉(zhuǎn)譯

總結(jié)

方式1是官方推薦的綁定方式，也是性能最好的方式。方式2和方式3會(huì)有性能影響并且當(dāng)方法作為屬性傳遞給子組件的時(shí)候會(huì)引起重渲問題。方式4目前屬于實(shí)驗(yàn)性語法，但是是最好的綁定方式，需要結(jié)合bable轉(zhuǎn)譯

好了，

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com