溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于React事件綁定的幾種方法對比的相關呢榮，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。
React事件綁定
由于類的方法默認不會綁定this，因此在調用的時候如果忘記綁定，this的值將會是undefined。
通常如果不是直接調用，應該為方法綁定this。綁定方式有以下幾種：
1. 在構造函數中使用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. 在調用的時候使用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. 在調用的時候使用箭頭函數綁定this
class Button extends React.Component {
handleClick(){
console.log('this is:', this);
}
render() {
return (
<button onClick={()=>this.handleClick()}>
Click me
</button>
);
}
}
4. 使用屬性初始化器語法綁定this(實驗性)
class Button extends React.Component {
handleClick=()=>{
console.log('this is:', this);
}
render() {
return (
<button onClick={this.handleClick}>
Click me
</button>
);
}
}
比較
方式2和方式3都是在調用的時候再綁定this。
方式1在類構造函數中綁定this，調用的時候不需要再綁定
方式4：利用屬性初始化語法，將方法初始化為箭頭函數，因此在創建函數的時候就綁定了this。
總結
方式1是官方推薦的綁定方式，也是性能最好的方式。方式2和方式3會有性能影響并且當方法作為屬性傳遞給子組件的時候會引起重渲問題。方式4目前屬于實驗性語法，但是是最好的綁定方式，需要結合bable轉譯
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
