javascript - React(ES6类)中绑定(bind)上下文的方法哪种比较好

Question

React ES6 类中没有自动绑定(bind)。因此开发人员有两种选择如何绑定(bind)上下文:

1) 在构造函数中

export class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myFunction = this.myFunction.bind(this);
  }
  myFunction() {
    // do something
  }
  render() {
    return (
      <div onClick={this.myFunction}></div>
    );
  }
}

2) 内联方法

export class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  myFunction() {
    // do something
  }
  render() {
    return (
      <div onClick={this.myFunction.bind(this)}></div>
    );
  }
}

哪种方法效率更高？

Answer 1

我推荐箭头函数。

export class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  myFunction = (e) => {
    // e.preventDefault()
    // do something
  }
  render() {
    return (
      <div onClick={e => this.myFunction(e)}></div>
    );
  }
}

bind() 不再是必需的。