Javascript 在onClick处理程序中传递参数的最有效方法

我正在使用内联箭头函数来更改React组件中某些div的

onClick

处理程序，但我知道这不是一种性能方面的好方法

客观地说，设置需要参数的

onClick

处理程序最有效的方法是什么？这就是我尝试过的：

1。内联箭头功能

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={() => this.changeRoute("page1")}>1</div>
      <div onClick={() => this.changeRoute("page2")}>2</div>
    </>
  )
}

changeRoute（路由名称）{
console.log（routeName）
}
render（）{
返回(
此.changeRoute（“page1”）}>1
此.changeRoute（“page2”）}>2
)
}

2。如果我使用构造函数绑定，那么如何传递道具？

constructor() {
  super(props)
  this.changeRoute = this.changeRoute.bind(this)
}
changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute}>1</div>
      <div onClick={this.changeRoute}>2</div>
    </>
  )
}

constructor（）{
超级（道具）
this.changeRoute=this.changeRoute.bind（this）
}
变更路由（路由名称）{
console.log（routeName）
}
render（）{
返回(
1.
2.
)
}

3。如果删除箭头函数，则在渲染本身上调用的函数

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute("page1")}>1</div>
      <div onClick={this.changeRoute("page2")}>2</div>
    </>
  )
}

changeRoute（路由名称）{
console.log（routeName）
}
render（）{
返回(
1.
2.
)
}

4。如果我使用内联绑定，那么它的性能也不是最好的

changeRoute (routeName) {
  console.log(routeName)
}
render() {
  return (
    <>
      <div onClick={this.changeRoute.bind(this, "page1")}>1</div>
      <div onClick={this.changeRoute.bind(this, "page2")}>2</div>
    </>
  )
}

changeRoute（路由名称）{
console.log（routeName）
}
render（）{
返回(
1.
2.
)
}

---

那么我如何才能继续以最佳方式传递参数呢？

您可以向div添加数据：

<div data-id={1} onClick={this.changeRoute}>1</div>

#1很好

#2也很好，但您需要传递道具，然后渲染功能将与#1完全相同。您将调用

bind

'd函数，因为您在构造函数中替换了它

#3是错误的，因为该函数在渲染期间被调用

关于#4，来自react

我们通常建议在构造函数中绑定或使用类 字段语法，以避免此类性能问题

---

当函数在其子组件中使用时，这将导致性能损失，并将导致子组件重新渲染（在您的情况下不是这样）。因此，您不应该执行#4

当前最好的方法是将事件处理程序包装在

useCallback

钩子中，因为它会阻止每次调用render时创建处理程序函数

import React，{useCallback}来自“React”
常量MyComponent=（{changeRoute}）=>{
const eventHandler=useCallback（（）=>{
changeRoute（'page1'）
}，[changeRoute]）
返回(
1.
)
}

---

有关更多信息，请检查-

您可以使用箭头函数定义您的

变更路线

处理程序

这称为

类字段语法

。更多关于它的官方文件

constructor() {
  super(props)
}

changeRoute = (parameter) => (event) => {
    // business logic for route change.
}

然后您可以直接使用此功能，如下所示：

render() {
  return (
    <>
      <div onClick={changeRoute(params1)}>1</div>
      <div onClick={changeRoute(params2)}>2</div>
    </>
  )
}

render（）{
返回(
1.
2.
)
}

您不必担心绑定。

---

箭头函数继承其父函数的

this

哈哈哈。。。这是可以做到的。但是react本身没有解决办法？@DarkKnight你最后的评论是

正在执行

。我的答案就是对此的回应。我想告诉你，如果你像我所发布的那样定义了点击处理程序，你的点击处理程序将不会执行。请检查@DarkKnight请阅读官方react docs推荐的方法之一。OP似乎使用了类组件，我希望我的回答能帮助他更好地理解这一点。也许值得注意的是，在这里使用内联箭头函数“在性能方面不是一个好方法”的原因并不是因为箭头函数在本质上运行缓慢（它们不是，而且在任何情况下，函数调用的成本对于很少执行的单击处理程序来说都可以忽略不计）但因为React会在每次重新呈现组件时创建新的函数实例。内联绑定也有同样的问题。而且通常情况下也可以，除非组件非常频繁地重新呈现。@在大多数情况下，组件会频繁地重新呈现，因为组件有输入字段和键入&在状态中设置e.target.value会导致频繁渲染。

render() {
  return (
    <>
      <div onClick={changeRoute(params1)}>1</div>
      <div onClick={changeRoute(params2)}>2</div>
    </>
  )
}