快捷導(dǎo)航

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

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

事件綁定也是其中一部分內(nèi)容,通過事件委托和事件合成,React 在內(nèi)部對事件進(jìn)行優(yōu)化和處理,減少了事件處理函數(shù)的調(diào)用次數(shù),從而提升了性能,本文主要介紹了React事件綁定的實現(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)的時候，點擊按鈕，則會發(fā)現(xiàn)輸出undefined****

2. 如何綁定

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

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

2.1 render方法中使用bind

如果使用一個類組件，在其中給某個元素/組件一個onClick屬性，他現(xiàn)在并會自定綁定其this到當(dāng)前組件，解決這個問題的方法是在函數(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渲染的時候，都會重新進(jìn)行bind操作，影響性能

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

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

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ù)綁定，實現(xiàn)也非常簡單，如下：

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