React.js：将参数传递给事件处理程序的最有效方法，而无需在组件中使用bind（）

小编典典

React.js：将参数传递给事件处理程序的最有效方法，而无需在组件中使用bind（）

reactjs

当必须this在事件处理程序中使用关键字时，必须将函数（事件处理程序）与thiskerword绑定。否则，您需要使用箭头功能。

例如

//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>
    );
}

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

bind(this, param) 在功能之后
匿名箭头功能

即

<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）。因此，它可以来自状态，道具或此类中定义的其他功能。

阅读 274

2020-07-22

共1个答案

小编典典

如果您担心内联箭头功能的性能，请不要使用它。您仍然可以使用public class方法并绑定上下文this。

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

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

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

根据devserkan的评论，

这很麻烦，与其他选项相同。每个渲染中也会重新创建此功能。

不，不是。请参阅文档中的注释：

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

另外，请参见来自bigga-hd的有关特定性能答案的评论：

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

您如何称呼此处理程序？

您可以像这样调用方法：

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

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

2020-07-22