javascript - React 将 this 绑定(bind)到类方法

Question

所以我正在读一本关于 React 的书，里面说我必须绑定(bind)我的方法，比如

this.onClickMe = this.onClickMe.bind(this);

但它看起来工作得很好，而不使用上面的代码

class ExplainBindingsComponent extends Component {
  onClickMe() {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={ () => { this.onClickMe() } }
        type="button"
      >
        Click Me
  </button>
    );
  }
}

但它是说我应该做这样的事情，

class ExplainBindingsComponent extends Component {
  constructor() {
    super();
    this.onClickMe = this.onClickMe.bind(this);
  }
  onClickMe() {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={this.onClickMe}
        type="button"
      >
        Click Me
  </button>
    );
  }
}

是 this.onClickMe = this.onClickMe.bind(this);还有什么我必须做的吗？如果是这样，它与我上面的示例相比有什么作用

Answer 1

有多种方法可以将你的函数绑定(bind)到 React 类的词法上下文，

一种这样的方法是在构造函数中绑定(bind)它，

另一种方法是使用类字段作为箭头函数，

第三种使用 .bind 或箭头在渲染中绑定(bind)的方法，

这些中的每一个都可以使用，但是最好避免在渲染中绑定(bind)，因为每次渲染都会返回一个新函数

使用类字段作为箭头函数。

class ExplainBindingsComponent extends Component {
  onClickMe = () => {
    console.log(this);
  }
  render() {
    return (
      <button
        onClick={ this.onClickMe }
        type="button"
      >
        Click Me
  </button>
    );
  }
}

渲染中的绑定(bind)

onClick={() => this.onClickMe() }

或者

onClick={this.onClick.bind(this)}