React.js：在组件中没有bind（）的情况下将参数传递给事件处理程序的最有效方法 [英] React.js: the most efficient way to pass a parameter to an event handler without bind() in a component

问题描述

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

When you have to use this keyword within an event handler, you have to bind the function (event handler) with this kerword. Otherwise, you need to use the arrow function.

例如

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

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

However, with the approach above, you can't pass a parameter. You need to use either...

1. bind（this，param）之后功能


2. 匿名箭头功能

1. bind(this, param) after the function
2. the anonymous arrow function

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>

以下是问题。

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

What is the most efficient way to pass a parameter to an event handler?

根据官方文档，使用 bind（）会破坏性能，因为......

According to the official doc, using bind() can undermine the performance, because...

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

Using Function.prototype.bind in render creates a new function each time the component renders

使用匿名箭头功能也是如此。文档说... ...

The same goes for using the anonymous arrow function. The doc says that...

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

Using an arrow function in render creates a new function each time the component renders

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

Then, what will be the most efficient way to pass a parameter?

任何输入都将是赞赏。

PS

PS

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

Some people have asked how param is determined. This will be determined dynamically (i.e. not always 111). So, it can be from states, props or some other functions defined in this class.

推荐答案

我在另一个中解释了它发布：单击反应组件中的事件。

I have explained it in my another post: click event in react component.

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

Never use inline arrow function if you're worried about its performance. You can still use the public class method and bind the context this.

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

你可以传递你喜欢的任何参数：

You can pass any parameters you like just like this:

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

---

根据devserkan 的评论，

这是和...其他选择。此函数也会在每次渲染中重新创建。

This is currying and same as other options. This function is also recreated in every render.

否。它没有。请参阅 docs 中的说明：

No. It doesn't. See the note from docs:

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

If this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

此外，请参阅在 bigga-hd > Certainperformance的答案：

Also, see the comment from bigga-hd below the certainperformance's answer:

避免在渲染中声明箭头功能或绑定以获得最佳性能。在render之外声明你的函数。每次渲染都不再有功能分配。

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

How do you call this handler?

您可以像这样调用方法：

You can call the method just like this:

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

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

这篇关于React.js：在组件中没有bind（）的情况下将参数传递给事件处理程序的最有效方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！