Najlepszy sposób na przekazanie parametrów w module obsługi onClick

To jest mój komponent Używam wbudowanej funkcji strzałki do zmiany trasy onClickdiv, ale wiem, że nie jest to dobry sposób pod względem wydajności

1. Funkcja strzałki w linii

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

2. Jeśli używam wiązania konstruktora, to jak mogę przekazywać rekwizyty?

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. Jeśli usunę funkcję strzałki, wówczas funkcja jest wywoływana na samym renderingu

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

4. Jeśli używam wiązania wbudowanego, nie jest to również najlepsze z wydajnością

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

Więc jak mogę przejść do najlepszego sposobu przekazywania parametrów?

Możesz użyć funkcji strzałki, aby zdefiniować changeRouteprogram obsługi.

Jest to znane jako Class field syntax. Więcej na ten temat tutaj, w oficjalnych dokumentach dotyczących reakcji.

constructor() {
  super(props)
}

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

Następnie możesz użyć tej funkcji bezpośrednio tak:

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

Nie musisz się martwić o wiązanie. Funkcje strzałek dziedziczą po rodzicach this.

Możesz dodać dane do div:

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

Następnie możesz pobrać te dane w module obsługi onClick:

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

# 1 jest w porządku.

# 2 jest również „w porządku”, ale musisz przekazać rekwizyty, wtedy funkcja renderowania będzie wyglądać dokładnie tak jak # 1 . Będziesz wywoływał funkcję bindd, ponieważ zastąpiłeś ją w konstruktorze.

# 3 jest po prostu zły, ponieważ funkcja jest wywoływana podczas renderowania.

A jeśli chodzi o # 4, od reagujących doktorów

Ogólnie zalecamy powiązanie w konstruktorze lub użycie składni pól klasy, aby uniknąć tego rodzaju problemów z wydajnością.

Powoduje to obniżenie wydajności, gdy twoja funkcja jest używana w jej komponentach potomnych i spowoduje ponowne renderowanie komponentów potomnych (w twoim przypadku tak nie jest). Więc nie powinieneś robić # 4 .

Obecnie najlepszym sposobem jest zawinięcie modułu obsługi zdarzeń, useCallbackponieważ uniemożliwi to utworzenie funkcji modułu obsługi za każdym razem, gdy wywoływane jest renderowanie.

import React, { useCallback } from 'react'

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

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

Aby uzyskać więcej informacji sprawdź - użyj dokumentów Callback