前言

成都創(chuàng)新互聯(lián)公司專注于資源網站建設服務及定制，我們擁有豐富的企業(yè)做網站經驗。 熱誠為您提供資源營銷型網站建設，資源網站制作、資源網頁設計、資源網站官網定制、成都微信小程序服務，打造資源網絡公司原創(chuàng)品牌,更為您提供資源網站排名全網營銷落地服務。

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

React事件綁定

由于類的方法默認不會綁定this，因此在調用的時候如果忘記綁定，this的值將會是undefined。

通常如果不是直接調用，應該為方法綁定this。綁定方式有以下幾種：

1. 在構造函數(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. 在調用的時候使用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. 在調用的時候使用箭頭函數(shù)綁定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。

• 優(yōu)點：寫法比較簡單，當組件中沒有state的時候就不需要添加類構造函數(shù)來綁定this
• 缺點：每一次調用的時候都會生成一個新的方法實例，因此對性能有影響，并且當這個函數(shù)作為屬性值傳入低階組件的時候，這些組件可能會進行額外的重新渲染，因為每一次都是新的方法實例作為的新的屬性傳遞。

方式1在類構造函數(shù)中綁定this，調用的時候不需要再綁定

• 優(yōu)點：只會生成一個方法實例，并且綁定一次之后如果多次用到這個方法也不需要再綁定。
• 缺點：即使不用到state，也需要添加類構造函數(shù)來綁定this，代碼量多一點。。。

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

• 優(yōu)點：創(chuàng)建方法就綁定this，不需要在類構造函數(shù)中綁定，調用的時候不需要再作綁定。結合了方式1、方式2、方式3的優(yōu)點
• 缺點：目前仍然是實驗性語法，需要用babel轉譯

總結

方式1是官方推薦的綁定方式，也是性能最好的方式。方式2和方式3會有性能影響并且當方法作為屬性傳遞給子組件的時候會引起重渲問題。方式4目前屬于實驗性語法，但是是最好的綁定方式，需要結合bable轉譯

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章標題：React學習之事件綁定的幾種方法對比
轉載源于：http://www.chinadenli.net/article14/jdhide.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、品牌網站設計、網站改版、動態(tài)網站、微信公眾號、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)