假设我在父组件中有一个函数，我想将其用作子组件的回调。哪种方式更好？
render() {
return (
<Child handleClick={this.handleClick.bind(this)} />
)
}
或者
constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}
根据这个eslint，最好在构造函数中这样做，因为 render() 方法可能会被多次调用。这对我来说很有意义。
然而，这仅仅意味着绑定函数最终成为每个实例的一个属性。从而破坏了原型的全部目的。
我知道属性初始值设定项：
handleClick = () => {
// do stuff
}
但看起来这种语法远未在 ES2017（或下一个可能是）中达成一致。出于这个原因，我害怕使用这种语法，因为它可能永远不会进入语言。
那么，说了这么多，最好的方法是什么？
尽管您和其他人在评论中所说的所有选项都确实有效，但我会选择Airbnb 的 React styleguide one：
✓ 在构造函数上绑定
constructor(props) {
super(props);
this.foo = this.foo.bind(this);
}
✓ ES7 对构造函数的绑定也是一个不错的选择（但请记住，它仍然是一个提议）
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>
}
当没有必要时，您正在执行另一项功能。