在 ReactJS 中绑定回调的最佳和最有效的方法是什么？在构造函数中或在渲染方法中或作为属性初始值设定项？

假设我在父组件中有一个函数，我想将其用作子组件的回调。哪种方式更好？

render() {
    return (
        <Child handleClick={this.handleClick.bind(this)} />
    )
}

or

constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
}

根据这个eslint https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md，最好在构造函数中这样做，因为 render() 方法可能会被多次调用。这对我来说非常有意义。

然而，这仅仅意味着绑定函数最终成为每个实例的属性。从而违背了原型的全部目的。

我确实了解属性初始值设定项：

handleClick = () => {
    // do stuff
}

但看起来这个语法还远没有被 ES2017（或者无论下一个可能是什么）达成一致。出于这个原因，我害怕使用这种语法，因为它可能永远不会进入该语言。

那么，说了这么多，解决这个问题的最佳方法是什么？

尽管您和其他人在评论中所说的所有选项都确实有效，但我会选择Airbnb React 风格指南 https://github.com/airbnb/javascript/tree/master/react#methods one:

✓ 绑定在构造函数上

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

✓ ES7 绑定构造函数也是一个不错的选择（尽管请记住，这是仍然是一个提案 https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla)

constructor(props) {
  super(props);
  this.foo = ::this.foo;
}

其他选项又如何呢？

✖ 渲染上的绑定

render() {
  return <button onClick={this.handleClick.bind(this}>...</button>
}

每次重新渲染时都会重新绑定，并不是说如果您有两个使用相同功能的元素，您将必须选择是否保留一个元素而不绑定或同时绑定两者（这会很丑陋或效率更低）。

✖ 箭头功能（不绑定）

render() {
  return <button onClick={(e) => this.handleClick(e)}>...</button>
}

当没有必要时，你会再执行一项功能。