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

React.js: the most efficient way to pass a parameter to an event handler without bind() in a component(React.js:将参数传递给事件处理程序的最有效方法，而无需在组件中使用 bind())

问题描述

当一个事件处理程序使用this(juetlike下面的handleClick使用this.setState)，你必须将事件处理程序与this 关键字.否则需要使用箭头函数.

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.

例如

//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. 匿名箭头函数

即

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

在 render 中使用 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

有人问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的评论，

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

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:

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

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's answer:

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

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

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

How do you call this handler?

你可以像这样调用方法:

You can call the method just like this:

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

_{PS:我没有将这篇文章标记为重复，因为问题范围有很大不同.因此，只需链接帖子以让您深入了解更多细节.}

这篇关于React.js:将参数传递给事件处理程序的最有效方法，而无需在组件中使用 bind()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！