Question

所以，我正在阅读一本关于React的书，该书说我必须绑定我的方法，如

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

将函数绑定到React类的词法上下文有多种方法，

一种方法是在构造函数中绑定它，
其他方法是使用类字段作为箭头函数，
使用.bind或箭头

可以使用其中的每一个，但最好避免在渲染中绑定，因为每个渲染都返回一个新函数

使用类字段作为箭头功能。

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

在渲染中绑定

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

或

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

Answer 2

this.onClickMe = this.onClickMe.bind(this);还是我必须要做的事情吗？

如果您使用捕获词汇this的箭头函数，则 不能执行此操作。但它被认为是一种最佳实践，因为它允许您避免在render内创建函数。

render() { return ( <button /* creates new function on every render call*/ onClick={ () => { this.onClickMe() } } type="button" > Click Me </button> ); }

VS

constructor() { super(); // creates function once per component instance this.onClickMe = this.onClickMe.bind(this); }

Answer 3

在您的情况下，您不需要，因为您使用箭头函数，其中this绑定到定义了箭头函数的上下文 - 在本例中为您的组件。

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

在没有任何绑定的情况下传递函数是必要的，因此可能会调用this指向另一个对象的位置。

将此绑定绑定到类方法

3 个答案: