Question

React ES6类中没有自动绑定。因此开发人员有两种选择来绑定上下文：

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()不再需要了。

Answer 2

对于处理函数，当它们作为普通函数调用时，它指的是全局对象。当使用ECMAScript 6类而不是React.createClass()时会发生这种情况，后者具有自动绑定功能。两种方法可以按预期实现绑定的效果。第一种方法，使用如下语法显式绑定处理函数。

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
}
handleChange() {}

另一种方法是以这种方式编写组件的handler属性，而不绑定任何东西。

<MyComponent onChange={() => this.handleChange()}><MyComponent />

通过这种方式，只有在触发相应的事件时才会调用处理程序，此时this引用组件实例，这是我们期望它引用的。

这两种方法都可行，决定使用哪种方式即可。

在React（ES6类）中绑定上下文的哪种方法更好

2 个答案: