在React中使用bind（this）

Question

我可以使用这些选项中的任何一种吗？他们都以同样的方式工作吗？我正在使用ES6。

onChange={this.makeChange.bind(this)}

onChange={() => this.makeChange()}

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

Answer 1

是的，你可以使用这三个。尽管它们的行为相同，但它们具有不同的性能影响。

在constructor中绑定函数是性能方面的最佳选择，因为该函数仅在实例化组件时创建一次。使用其他解决方案时，只要组件（重新）呈现，就会创建一个新函数。这将导致子组件也重新渲染，因为它们的道具已经改变。

您可以在官方的React文档中详细了解这一点：https://facebook.github.io/react/docs/handling-events.html

就个人而言，我更喜欢使用类属性的以下语法（仅当您使用TypeScript或Babel plugin时才可以使用此选项）：

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

此选项也在React docs中进行了解释。