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

Question

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

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

或者

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

根据这个eslint，最好在构造函数中这样做，因为 render() 方法可能会被多次调用。这对我来说非常有意义。

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

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

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

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

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

Answer 1

尽管您和其他人在评论中所说的所有选项都确实有效，但我会选择Airbnb 的 React 样式指南之一：

\n\n

\xe2\x9c\x93 绑定到构造函数

\n\n

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

\n\n

\xe2\x9c\x93 构造函数上的 ES7 绑定也是一个不错的选择（尽管请记住它仍然是一个提案）

\n\n

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

\n\n\n\n

其他选项又如何呢？

\n\n

\xe2\x9c\x96 渲染时绑定

\n\n

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

\n\n

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

\n\n

\xe2\x9c\x96 箭头函数（不绑定）

\n\n

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

\n\n

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

\n