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

 

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