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

本文主要為大家介紹了關於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中文網其他相關文章！