在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.如果我使用构造器绑定那么我怎么传递道具？

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.如果我使用内联绑定，那么它的性能也不是最好的

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处理程序。

这称为类字段语法。更多关于它在这里的官方反应文件。

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