javascript - 我应该在 React 组件中的什么地方绑定(bind)方法？

Question

我现在学习 React 并注意到很多人在构造函数中绑定(bind)他们的方法。

像这样:

class MyComponent extends React.Component {
  constructor() {
    super();
    this.myMethod = this.myMethod.bind(this);
  }

  render() {
    <button onClick={this.myMethod}>Click me</button>
  }

  myMethod() {
    // do something
  }
}

但我习惯于这样写:

render() {
    <button onClick={this.myMethod.bind(this)}>Click me</button>
}

一些人告诉我，使用第二种方法是一种糟糕的体验。

那么您能告诉我第一种方法和第二种方法之间的区别吗？有什么好处和坏处吗？还是性能问题？

Answer 1

你是对的，别人告诉你的也是对的。

我们鼓励您在构造函数中进行绑定(bind)，因为每个组件只调用一次构造函数，因此如果您在构造函数中进行绑定(bind)，它只会在 Webpack bundle.js 文件中创建一个新对象/函数一次，因此影响不大

不鼓励您直接在渲染中进行绑定(bind)，因为组件渲染有多种原因，例如当您执行 setState 时，当您的组件接收到新的 Prop 时，您的组件将渲染很多次。因此，由于您在组件渲染时直接在 render 中绑定(bind)，因此每次在 Webpack bundle.js 中都会创建一个新函数，并且您的 bundle 文件大小会增加，当您的应用程序包含数千个组件时，这会影响性能，如果您直接在在每个组件中渲染。

因此建议您仅在构造函数中进行绑定(bind)。希望澄清