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语法糖

 

以上三种方法各有特色，需根据实际状况而使用。