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

Question

我正在使用内联箭头函数来更改 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>
    </>
  )
}

<强>2。如果我使用构造函数绑定(bind)，那么如何传递 props？

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

<强>3。如果我删除箭头函数，则在渲染本身上调用该函数

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

<强>4。如果我使用内联绑定(bind)，那么它的性能也不是最好的

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

那么我怎样才能以最好的方式传递参数呢？

Answer 1

您可以使用箭头函数来定义您的 changeRoute 处理程序。

这称为类字段语法。更多信息here在官方 react 文档中。

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

您不必担心绑定(bind)问题。箭头函数继承其父级的 this。