React組件綁定this的三種方法

咱們在使用React組件時，調用方法經常用到this和event對象，默認狀況是不會綁定到組件上的，須要特殊處理。

節點上使用bind綁定

特色：該方法會在每次渲染組件時都會從新綁定一次，消耗必定的性能。不符合表象與行爲分離準則

它屬於ES5函數擴展的方法Function.prototype.bind(thisArg [, arg1 [, arg2, …]])，bind()返回一個新的函數對象，該函數的this被綁定到thisArg上，並向事件處理器中傳入參數。

 1 class App extends Component {
 2   render() {
 3     return (
 4       <div className="App">
 5         <header className="App-header">
 6           hello world
 7           <h3 onClick={this.handleClick.bind(this, 'Jake')}>事件點擊</h3>
 8         </header>
 9       </div>
10     );
11   }
12   handleClick(name, event) {
13     console.log(this)
14     console.log('事件', event)
15     console.log('參數', name)
16   }
17 }

這裏須要注意的是，this必須放在其餘實參最前面, 形參event必須放在其餘參數後面，而且調用函數時無需傳入event對象

 

構造函數中使用bind綁定

特色：該方式是將bind從節點移到構造函數上, 組件渲染時不會從新綁定。不會形成額外性能損耗

 1 class App extends Component {
 2   constructor() {
 3     super()
 4     this.handleClick = this.handleClick.bind(this, 'Jake')  5   }
 6   render() {
 7     return (
 8       <div className="App">
 9         <header className="App-header">
10           hello world
11           <h3 onClick={this.handleClick}>事件點擊</h3>
12         </header>
13       </div>
14     );
15   }
16   handleClick(name, event) {
17     console.log(this)
18     console.log('事件', event)
19     console.log('參數', name)
20   }
21 }

 

箭頭函數上綁定

特色：該方法分爲兩種ES6和ES7語法， 利用了箭頭函數自動綁定this做用域的特性

 1 class App extends Component {
 2   render() {
 3     return (
 4       <div className="App">
 5         <header className="App-header">
 6           hello world
 7           <h3 onClick={(e) => {this.handleClick('ketty', e) }} >事件點擊</h3>
 8         </header>
 9       </div>
10     );
11   }
12   handleClick(name, event) {
13     console.log(this)
14     console.log('事件', event)
15     console.log('參數', name)
16   }
17 }

注意，該方法調用時必須傳實參event才能獲取event對象，而且它要在其餘實參後面傳入

(e) => {this.handleClick('ketty', e) }

不過該方法有個問題，就是匿名函數，沒法移除監聽事件，則須要改用ES7語法糖方式

 1 class App extends Component {
 2   render() {
 3     return (
 4       <div className="App">
 5         <header className="App-header">
 6           hello world
 7           <h3 onClick={this.handleClick} >事件點擊</h3>
 8         </header>
 9       </div>
10     );
11   }
12   handleClick = (event) => {
13     console.log(this)
14     console.log('事件', event)
15   }
16 }

 

但此時，無法在調用函數時傳入實參 

並且該語法糖，在create-react-app上默認支持，如自定義腳手架，則須要安裝babel-plugin-transform-class-properties插件解析ES7語法糖

 

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