React元件繫結this的三種方法

我們在使用react元件時，呼叫方法常常用到this和event物件，預設情況是不會繫結到元件上的，需要特殊處理。

節點上使用bind繫結

特點：該方法會在每次渲染元件時都會重新繫結一次，消耗一定的效能。不符合表象與行為分離準則

它屬於es5函式擴充套件的方法function.prototype.bind(thisarg [, arg1 [, arg2, …]])，bind()返回乙個新的函式物件，該函式的this被繫結到thisarg上，並向事件處理器中傳入引數。

1

2render() 
12handleclick(name, event) 
17 }

這裡需要注意的是，this必須放在其他實參最前面, 形參event必須放在其他引數後面，並且呼叫函式時無需傳入event物件

建構函式中使用bind繫結

特點：該方式是將bind從節點移到建構函式上, 元件渲染時不會重新繫結。不會造成額外效能損耗

1

2constructor() 
6render() 
16handleclick(name, event) 
21 }

箭頭函式上繫結

特點：該方法分為兩種es6和es7語法， 利用了箭頭函式自動繫結this作用域的特性

1

2render() 
12handleclick(name, event) 
17 }

注意，該方法呼叫時必須傳實參event才能獲取event物件，並且它要在其他實參後面傳入

(e) =>

1

2render() 
12   handleclick = (event) =>
16 }

但此時，沒法在呼叫函式時傳入實參 

以上三種方法各有特點，需根據實際情況而使用。

React繫結this的三種方式

react可以使用react.createclass es6 classes 純函式3種方式構建元件。使用react.createclass會自動繫結每個方法的this到當前元件，但使用es6 classes或純函式時，就要靠手動繫結this了。接下來介紹react中三種繫結this的方法bind ...

react（三） 容器元件和傻瓜元件

讓乙個元件只專注於一件事，如果發現讓乙個元件做的事情太多，就可以把這個元件拆分成多個元件讓每乙個元件只專注於一件事 深入淺出react和redux 程墨 乙個react元件最基本的基本上就是完成兩大功能 1 讀取store的狀態，用於初始化元件的兩大狀態，監聽store的狀態變化 2 根據當前的pr...

react（三） 容器元件和傻瓜元件

讓乙個元件只專注於一件事，如果發現讓乙個元件做的事情太多，就可以把這個元件拆分成多個元件讓每乙個元件只專注於一件事 深入淺出react和redux 程墨 乙個react元件最基本的基本上就是完成兩大功能 1 讀取store的狀態，用於初始化元件的兩大狀態，監聽store的狀態變化 2 根據當前的pr...