快捷導(dǎo)航

React 事件綁定的實(shí)現(xiàn)及區(qū)別

更新時(shí)間：2024年03月11日 09:34:48 作者：前端小超人rui

事件綁定也是其中一部分內(nèi)容,通過事件委托和事件合成,React 在內(nèi)部對(duì)事件進(jìn)行優(yōu)化和處理,減少了事件處理函數(shù)的調(diào)用次數(shù),從而提升了性能,本文主要介紹了React事件綁定的實(shí)現(xiàn)及區(qū)別,感興趣的可以了解一下

1. 是什么

在react應(yīng)用中，事件名都是小駝峰格式進(jìn)行書寫，例如onclick要改寫成onClick最簡單的綁定事件如下：

class ShowAlert extends React.Component{
    ShowAlert(){
        console.log('hello')
    }
    render(){
        return <button onClick={this.ShowAlert}>show</button>
    }
}

從上面可以看到，事件綁定的方法需要使用{}包住上述代碼看似沒有問題，但是當(dāng)前處理函數(shù)代碼或換成console.log(this)的時(shí)候，點(diǎn)擊按鈕，則會(huì)發(fā)現(xiàn)輸出undefined****

2. 如何綁定

為了解決上面正確輸出this問題，常見的綁定方式有：

render方法中使用bind
render方法中使用尖頭函數(shù)
constructor中bind
定義階段使用箭頭函數(shù)綁定

2.1 render方法中使用bind

如果使用一個(gè)類組件，在其中給某個(gè)元素/組件一個(gè)onClick屬性，他現(xiàn)在并會(huì)自定綁定其this到當(dāng)前組件，解決這個(gè)問題的方法是在函數(shù)后使用.bind（this）將this綁定到當(dāng)前組件中

class App extends React.Component{
    handleClick(){
        console.log(this)
    }
    render(){
        return <div onClick={this.handleClick.bind(this)}>test</div>
    }
}

這種渲染方式每次render渲染的時(shí)候，都會(huì)重新進(jìn)行bind操作，影響性能

2.2 render方法中使用箭頭函數(shù)

通過ES6的上下文來將this的指向綁定給當(dāng)前組件，同樣再每一次render的時(shí)候都會(huì)生成新的方法，影響性能

class App extends React.Component{
    handleClick(){
        console.log(this)
    }
    render(){
        return <div onClick={e=>this.handleClick.bind(e)}>test</div>
    }
}

2.3 constructor中bind

在constructor中預(yù)先綁定bind當(dāng)前組件，可以避免render操作中重復(fù)綁定

class App extends React.Component{
    constructor(props){
      super(props);
      this.handleClick=this.handClick.bind(this);
    }
    handleClick(){
        console.log(this)
    }
    render(){
        return <div onClick={this.handleClick.bind(this)}>test</div>
    }
}

2.4 定義階段使用箭頭函數(shù)綁定(最優(yōu))

跟上述方式三一樣，能夠避免在render操作中重復(fù)綁定，實(shí)現(xiàn)也非常簡單，如下：

class App extends React.Component{
    constructor(props){
      super(props)
    }
    handleClick=()=>{
        console.log(this)
    }
    render(){
        return <div onClick={this.handleClick}>test</div>
    }
}

3. 區(qū)別

上述四種方法的方式，區(qū)別如下：

編寫方式：方式一方式二寫法簡單，方式三的編寫過于冗雜
性能方面：方式一和方式二在每次組件render的時(shí)候都會(huì)生成新的方法實(shí)例，性能問題欠缺。若該函數(shù)作為屬性值傳給子組件的時(shí)候，都會(huì)導(dǎo)致額外的渲染，而方式三方式四只會(huì)生成一個(gè)方法實(shí)例

綜上所述，方式四是最優(yōu)的事件綁定方式

到此這篇關(guān)于React 事件綁定的實(shí)現(xiàn)及區(qū)別的文章就介紹到這了,更多相關(guān)React 事件綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: