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

Question

当事件处理程序使用this时（下面的handleClick使用this.setstate)，您必须将事件处理程序与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>
    );
}

但是，使用上面的方法，您不能传递参数。你需要用任何一种...

1. 函数后绑定（this,param)
2. 匿名箭头函数

<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会在组件每次呈现时创建一个新函数

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

在render中使用箭头函数会在组件每次呈现时创建一个新函数

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

如有任何意见，将不胜感激。

Answer 1

我在另一篇文章中解释过：react组件中的click事件。

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

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

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

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

根据Devserkan的评论，

这是currying和相同的其他选项。这个函数也在每次呈现中重新创建。

不。不是。参见文档中的注释：

您可以像这样调用方法：

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

_{ps:我没有标记这篇文章是重复的，因为问题范围有明显的不同。所以，我们只需要链接这篇文章，让您深入了解更多细节。}