前言

本文主要給大家介紹的是關于React處理事件響應的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹吧。

React中定義一個組件，可以通過React.createClass或者ES6的class。本文討論的React組件是基于class定義的組件。采用class的方式，代碼結構更加清晰，可讀性強，而且React官方也推薦使用這種方式定義組件。

處理事件響應是Web應用中非常重要的一部分。React中，處理事件響應的方式有多種。

一、使用箭頭函數

先上代碼：

//代碼1class MyComponent extends React.Component { render() { return (  <button onClick={()=>{console.log('button clicked');}}>  Click  </button> ); }}

當事件響應邏輯比較復雜時，再把所有的邏輯直接寫在onClick的大括號內，就會導致render函數變得臃腫，不容易直觀地看出組件render出的元素結構。這時，可以把邏輯封裝成組件的一個方法，然后在箭頭函數中調用這個方法。

如下所示：

//代碼2class MyComponent extends React.Component { constructor(props) { super(props); this.state = {number: 0}; } handleClick() { this.setState({  number: ++this.state.number }); }  render() { return (  <div>  <div>{this.state.number}</div>  <button onClick={()=>{this.handleClick();}}>   Click  </button>  </div> ); }}

這種方式最大的問題是，每次render調用時，都會重新創建一個事件的回調函數，帶來額外的性能開銷，當組件的層級越低時，這種開銷就越大，因為任何一個上層組件的變化都可能會觸發這個組件的render方法。當然，在大多數情況下，這點性能損失是可以不必在意的。這種方式也有一個好處，就是不需要考慮this的指向問題，因為這種寫法保證箭頭函數中的this指向的總是當前組件。

二、使用組件方法

代碼先：

//代碼3class MyComponent extends React.Component { constructor(props) { super(props); this.state = {number: 0}; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({  number: ++this.state.number }); }  render() { return (  <div>  <div>{this.state.number}</div>  <button onClick={this.handleClick}>   Click  </button>  </div> ); }}

這種方式的好處是每次render，不會重新創建一個回調函數，沒有額外的性能損失。需要注意的是，使用這種方式要在構造函數中為事件回調函數綁定this: this.handleClick = this.handleClick.bind(this) ，否則handleClick中的this是undefined。這是因為ES6 語法的緣故，ES6 的 Class 構造出來的對象上的方法默認不綁定到 this 上，需要我們手動綁定。每次都手動綁定this是不是有點蛋疼？好吧，讓我們來看下一種方式。