如何正確地在React中處理事件

1、構造器內繫結this

class mycomponent extends react.component ;
this.handleclick = this.handleclick.bind(this);
}handleclick() );
}render() 
click);}
}

這種方式的好處是每次render，不會重新建立乙個**函式，沒有額外的效能損失。需要注意的是，使用這種方式要在建構函式中為事件**函式繫結this: this.handleclick = this.handleclick.bind(this)，否則handleclick中的this是undefined。這是因為es6 語法的緣故，es6 的 class 構造出來的物件上的方法預設不繫結到 this 上，需要我們手動繫結。

2、屬性初始化

使用es7的 property initializers，**可以這樣寫：

class mycomponent extends react.component ;
}handleclick = () => );
}render() 
click);}
}

3、箭頭函式

class mycomponent extends react.component }>
click);}
}

當事件響應邏輯比較複雜時，如果再把所有的邏輯直接寫在onclick的大括號內，就會導致render函式變得臃腫，不容易直觀地看出元件render出的元素結構。這時，可以把邏輯封裝成元件的乙個方法，然後在箭頭函式中呼叫這個方法。如下所示：

class mycomponent extends react.component ;
}handleclick() );
}render() 
}>click);}
}

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

4、函式傳遞引數

事件的**函式預設是會被傳入乙個事件物件event作為引數的。如果我想傳入其他引數給**函式應該怎麼辦呢？

使用第一種方式（構造器內繫結this）的話，可以把繫結this的操作延遲到render中，在繫結this的同時，繫結額外的引數：

// **6
class mycomponent extends react.component ;
}handleclick(item) );
}render() 
}

使用第二種方式（屬性初始化），解決方案和第一種基本一致：

// **7
class mycomponent extends react.component ;
}handleclick = (item) =>  );
}render() 
}

不過這種方式就有點雞肋了，因為雖然你不需要通過bind函式繫結this，但仍然要使用bind函式來繫結其他引數。

使用第三種方式（函式傳遞引數）的話很簡單，直接傳就可以了：

class mycomponent extends react.component ;
}handleclick(item,event) );
}render() 
}

關於事件響應的**函式，還有乙個地方需要注意。不管你在**函式中有沒有顯式的宣告事件引數event，react都會把事件event作為引數傳遞給**函式，且引數event的位置總是在其他自定義引數的後面。例如，在**6和**7中，handleclick的引數中雖然沒有宣告event引數，但你依然可以通過arguments[1]獲取到事件event物件。

總結一下，三種繫結事件**的方式，第一種有額外的效能損失；第二種需要手動繫結this，**量增多；第三種用到了es7的特性，目前並非預設支援，需要babel外掛程式的支援，但是寫法最為簡潔，也不需要手動繫結this。推薦使用第二種和第三種方式。

如何正確地在React中處理事件

如何正確地在MDK中使用關鍵

如何正確地寫出單例模式

如何正確地部署防火牆？

如何正確地在React中處理事件

如何正確地在MDK中使用關鍵

如何正確地寫出單例模式

如何正確地部署防火牆？

相關推薦