Der beste Weg, um Parameter im onClick-Handler zu übergeben

Dies ist meine Komponente. Ich verwende die Inline-Pfeilfunktion, um die Route onClickvon div zu ändern, aber ich weiß, dass dies in Bezug auf die Leistung kein guter Weg ist

1. Inline-Pfeilfunktion

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

2. Wenn ich Konstruktorbindung verwende, wie kann ich dann Requisiten übergeben?

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. Wenn ich die Pfeilfunktion entferne, wird die Funktion beim Rendern selbst aufgerufen

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

4. Wenn ich Inline-Bindung verwende, ist dies auch bei der Leistung nicht am besten

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

Wie kann ich dann am besten mit der Übergabe von Parametern fortfahren?

Mit der Pfeilfunktion können Sie Ihren changeRouteHandler definieren .

Dies ist bekannt als Class field syntax. Mehr dazu hier in offiziellen Reaktionsdokumenten.

constructor() {
  super(props)
}

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

Dann können Sie diese Funktion direkt wie folgt nutzen:

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

Sie müssen sich nicht um die Bindung kümmern. Pfeilfunktionen erben die ihrer Eltern this.

Sie können Ihrem div Daten hinzufügen:

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

Anschließend können Sie diese Daten in Ihrem onClick-Handler abrufen:

onClick = (event) => {
  const id = event.currentTarget.dataset.id;
}

# 1 ist in Ordnung.

# 2 ist auch 'in Ordnung', aber Sie müssen Requisiten übergeben, dann sieht die Renderfunktion genau wie # 1 aus . Sie rufen die bindFunktion 'd' auf, weil Sie sie im Konstruktor ersetzt haben.

# 3 ist einfach falsch, da die Funktion beim Rendern aufgerufen wird.

Und in Bezug auf # 4 aus React Docs

Wir empfehlen im Allgemeinen, im Konstruktor zu binden oder die Syntax der Klassenfelder zu verwenden, um diese Art von Leistungsproblemen zu vermeiden.

Dies führt zu einer Leistungsminderung, wenn Ihre Funktion in ihren untergeordneten Komponenten verwendet wird, und führt dazu, dass die untergeordneten Komponenten erneut gerendert werden (in Ihrem Fall nicht). Du solltest also nicht # 4 machen .

Der derzeit beste Weg ist, Ihren Event-Handler in einen useCallbackHook zu verpacken, da dadurch verhindert wird, dass Ihre Handler-Funktion bei jedem Aufruf des Renderings erstellt wird.

import React, { useCallback } from 'react'

const MyComponent = ({ changeRoute }) => {
  const eventHandler = useCallback(() => {
    changeRoute('page1')
  }, [changeRoute])

  return (
    <div onClick={eventHandler}>1</div>
  )
}

Für weitere Informationen überprüfen Sie - verwenden Sie Callback-Dokumente