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

问题描述

当事件处理程序使用 this 时(就像下面的 handleClick 使用 this.setState)，你必须用 this.setState 绑定事件处理程序code>this 关键字.否则，您需要使用箭头函数.

例如

//这个函数在使用this"时不被绑定；里面的关键字.//仍然有效，因为它使用了箭头函数handleClick = () =>{this.setState({是点击:真});}使成为() {返回 (
<button onClick={this.handleClick}>Click</button>
);}

但是，使用上述方法，您无法传递参数.您需要使用任何一种...

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

即

点击将会<button onClick={this.handleClick.bind(this, 111)}>点击</button>或者<button onClick={() =>this.handleClick(111)}>点击</button>

问题来了.

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

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

<块引用>

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

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

<块引用>

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

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

任何输入将不胜感激.

PS

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

解决方案

我在我的另一篇文章中解释过:react 组件中的点击事件.

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

handleClick = () =>() =>{this.setState({//现在可以使用了是点击:真});}

你可以像这样传递任何你喜欢的参数:

handleClick = (param1, param2, param3) =>(事件) =>{

<小时>

根据 devserkan 的评论，

<块引用>

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

没有.它没有.请参阅 docs 中的注释:

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

另外，请参阅 bigga-hd 的评论.com/a/52788651/2138752">某些性能的答案:

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

<小时><块引用>

你如何调用这个处理程序?

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

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

_{PS:我没有将此帖子标记为重复，因为问题范围有显着差异.因此，只需链接帖子即可让您深入了解更多细节.}

When an event handler uses this (juet like handleClick below uses this.setState), you have to bind the event handler with this kerword. Otherwise, you need to use the arrow function.

e.g.

//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) after the function
2. the anonymous arrow function

i.e.

<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>

Here is the question.

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

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

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?

Any input will be appreciated.

PS

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.

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) => {

---

As per devserkan's comment,

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

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

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.

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

Avoid declaring arrow functions or binding in render for optimal performance. Declare your functions outside of render. No more function allocations on each render.

---

How do you call this handler?

You can call the method just like this:

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

_{PS: I did not mark this post as duplicate as question scope is significantly different. So, just linked the post to get you dig into more detail.}

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