首頁 > web前端 > js教程 > 主體

React事件綁定的幾種方法分享

小云云
發布: 2018-02-02 13:10:34
原創
1431 人瀏覽過

本文主要為大家介紹了關於React學習之事件綁定的幾種方法對比,文中透過範例程式碼介紹的非常詳細,對大家的學習或工作具有一定的參考學習價值,希望能幫助大家更深掌握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。

  • 優點:寫法比較簡單,當元件中沒有state的時候就不需要加入類別建構子來綁定this

  • ##缺點:每次呼叫的時候都會產生一個新的方法實例,因此對效能有影響,並且當這個函數作為屬性值傳入低階元件的時候,這些元件可能會進行額外的重新渲染,因為每次都是新的方法實例作為的新的屬性傳遞。

方式1在類別建構子中綁定this,呼叫的時候不需要再綁定

  • 優點:只會產生一個方法實例,並且綁定一次之後如果多次用到這個方法也不需要再綁定。

  • 缺點:即使不用到state,也需要加入類別建構子來綁定this,程式碼量多一點。 。 。

方式4:利用屬性初始化語法,將方法初始化為箭頭函數,因此在建立函數的時候就綁定了this。


  • 優點:建立方法就綁定this,不需要在類別建構子中綁定,呼叫的時候不需要再作綁定。結合了方式1、方式2、方式3的優點

  • 缺點:目前仍是實驗性語法,需要用babel轉譯

  • ##相關推薦:


jQuery事件綁定功能基礎解說

#詳解jQuery實作基本的事件綁定功能

#詳解ES6中javascript實作函數綁定及類別的事件綁定功能

以上是React事件綁定的幾種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!