React.js：在组件中不使用 bind() 将参数传递给事件处理程序的最有效方法

Question

When an event handler uses this (juet like handleClick below uses this.setState ), you have to bind the event handler with this kerword.否则，您需要使用 箭头功能。

例如

//This function isn't bound whilst using "this" keyword inside of it.
//Still, it works because it uses an arrow function
handleClick = () => {
    this.setState({
      isClicked:true
    });
}

render() {
    return (
      <div className="App">
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
}

但是，使用上述方法，您不能传递参数。你需要使用…

1. bind(this, param) 函数后
2. 匿名箭头函数

IE

 <button onClick={this.handleClick}>Click</button>
will be
<button onClick={this.handleClick.bind(this, 111)}>Click</button>
or
<button onClick={() => this.handleClick(111)}>Click</button>

这是问题。

将参数传递给事件处理程序的最有效方法是什么？

根据 官方文档，使用 bind() 会破坏性能，因为…

在 render 中使用 Function.prototype.bind 会在每次组件渲染时创建一个新函数

使用匿名箭头函数也是如此。医生说…

在渲染中使用箭头函数会在每次组件渲染时创建一个新函数

那么，传递参数的最有效方式是什么？

任何输入将不胜感激。

聚苯乙烯

有人问 param 是如何确定的。这将动态确定（即不总是 111 ）。因此，它可以来自状态、道具或此类中定义的其他一些函数。

原文由 Hiroki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我已经在我的另一篇文章中解释过了： click event in react component 。

如果您担心其性能，请不要使用内联箭头函数。您仍然可以使用公共类方法并绑定上下文 this 。

 handleClick = () => () => {
    this.setState({ // this works now
      isClicked:true
    });
}

您可以像这样传递任何您喜欢的参数：

 handleClick = (param1, param2, param3) => (event) => {

---

根据 devserkan 的评论，

这是柯里化，与其他选项相同。这个函数也在每个渲染中重新创建。

不，它没有。请参阅 文档 中的说明：

如果此回调作为 prop 传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用 类字段语法，以避免此类性能问题。

另外，请参阅某些性能 的答案 下方来自 bigga-hd 的评论：

避免在渲染中声明箭头函数或绑定以获得最佳性能。在渲染之外声明您的函数。每个渲染器上不再分配函数。

---

你怎么称呼这个处理程序？

您可以像这样调用该方法：

 onClick={this.handleClick(param1,param2,param3)}

PS：我没有将这篇文章标记为重复，因为问题范围明显不同。因此，只需链接帖子即可让您深入了解更多细节。

原文由 Bhojendra Rauniyar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

代替 .bind 在 render() 中创建或创建匿名箭头函数，您可以在 render() 217e9b923e0cbc9b5a44550e6-c0 之外 创建绑定/匿名函数，例如在实例化对象上在构造函数或类似的东西中，并使用对该 _单一_（从未重新创建）函数的引用。例如，运行 _一次_：

 this.boundHandleClick = this.handleClick.bind(this, 111);

或者

this.boundHandleClick = () => this.handleClick(111);

然后，在 render 中，参考 boundHandleClick ：

 return (
  <div className="App">
    <button onClick={this.boundHandleClick}>Click</button>
  </div>
);

如果您需要使用 --- 中的参数（ 111 ） render 那么您可以使用对象查找来查看是否存在具有该参数的绑定函数。如果是这样，只需使用该绑定函数 - 否则，创建它（ _一次_，这样以后每次使用该参数时都不必再次创建它）：

 this.boundClicks = {};
// ...
if (!this.boundClicks['111']) this.boundClicks['111'] = () => this.handleClick(111);
return (
  <div className="App">
    <button onClick={this.boundClicks['111']}>Click</button>
  </div>
);

原文由 CertainPerformance 发布，翻译遵循 CC BY-SA 4.0 许可协议