React组件绑定this的三种方法

我们在使用React组件时，调用方法常常用到this和event对象，默认情况是不会绑定到组件上的，需要特殊处理。

节点上使用bind绑定

特点：该方法会在每次渲染组件时都会重新绑定一次，消耗一定的性能。不符合表象与行为分离准则

它属于ES5函数扩展的方法Function.prototype.bind(thisArg [, arg1 [, arg2, …]])，bind()返回一个新的函数对象，该函数的this被绑定到thisArg上，并向事件处理器中传入参数。

 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
           hello world
           <h3 onClick={this.handleClick.bind(this, 'Jake')}>事件点击</h3>
         </header>
       </div>
     );
   }
   handleClick(name, event) {
     console.log(this)
     console.log('事件', event)
     console.log('参数', name)
   }
 }

这里需要注意的是，this必须放在其他实参最前面, 形参event必须放在其他参数后面，并且调用函数时无需传入event对象

构造函数中使用bind绑定

特点：该方式是将bind从节点移到构造函数上, 组件渲染时不会重新绑定。不会造成额外性能损耗

 class App extends Component {
   constructor() {
     super()
     this.handleClick = this.handleClick.bind(this, 'Jake')
   }
   render() {
     return (
       <div className="App">
         <header className="App-header">
           hello world
           <h3 onClick={this.handleClick}>事件点击</h3>
         </header>
       </div>
     );
   }
   handleClick(name, event) {
     console.log(this)
     console.log('事件', event)
     console.log('参数', name)
   }
 }

箭头函数上绑定

特点：该方法分为两种ES6和ES7语法， 利用了箭头函数自动绑定this作用域的特性

 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
           hello world
           <h3 onClick={(e) => {this.handleClick('ketty', e) }} >事件点击</h3>
         </header>
       </div>
     );
   }
   handleClick(name, event) {
     console.log(this)
     console.log('事件', event)
     console.log('参数', name)
   }
 }

注意，该方法调用时必须传实参event才能获取event对象，并且它要在其他实参后面传入

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

不过该方法有个问题，就是匿名函数，无法移除监听事件，则需要改用ES7语法糖方式

 class App extends Component {
   render() {
     return (
       <div className="App">
         <header className="App-header">
           hello world
           <h3 onClick={this.handleClick} >事件点击</h3>
         </header>
       </div>
     );
   }
   handleClick = (event) => {
     console.log(this)
     console.log('事件', event)
   }
 }

但此时，没法在调用函数时传入实参

而且该语法糖，在create-react-app上默认支持，如自定义脚手架，则需要安装babel-plugin-transform-class-properties插件解析ES7语法糖

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