วิธีที่ดีที่สุดในการส่งผ่านพารามิเตอร์ในตัวจัดการ onClick

นี่คือองค์ประกอบของฉันฉันใช้ฟังก์ชั่นลูกศรแบบอินไลน์เพื่อเปลี่ยนเส้นทางonClickของ div แต่ฉันรู้ว่ามันไม่ได้เป็นวิธีที่ดีในแง่ของประสิทธิภาพ

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

จากนั้นฉันจะดำเนินการวิธีส่งพารามิเตอร์ที่ดีที่สุดได้อย่างไร

คุณสามารถใช้ฟังก์ชั่นลูกศรเพื่อกำหนดchangeRouteตัวจัดการของคุณ

Class field syntaxนี้เป็นที่รู้จักกัน เพิ่มเติมได้ที่นี่ในเอกสารตอบโต้อย่างเป็นทางการ

constructor() {
  super(props)
}

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

จากนั้นคุณสามารถใช้ฟังก์ชั่นนี้ได้โดยตรงเช่น:

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

คุณไม่ต้องกังวลกับการผูกมัด thisลูกศรฟังก์ชั่นได้รับมรดกของพ่อแม่ของพวกเขา

คุณสามารถเพิ่มข้อมูลลงใน div ของคุณ:

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

จากนั้นคุณสามารถดึงข้อมูลนั้นในตัวจัดการ onClick ของคุณ:

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

# 1ไม่เป็นไร

# 2ยังเป็น 'ดี' แต่คุณต้องผ่านพร็อพแล้วทำให้ฟังก์ชั่นจะมีลักษณะเหมือน# 1 คุณจะเรียกใช้bindฟังก์ชัน 'd เพราะคุณแทนที่ฟังก์ชันนี้ใน constructor

# 3ผิดปกติเนื่องจากฟังก์ชั่นถูกเรียกระหว่างแสดงผล

และเกี่ยวกับ # 4 จากเอกสารตอบโต้

โดยทั่วไปเราขอแนะนำให้ผูกในตัวสร้างหรือใช้ไวยากรณ์คลาสฟิลด์เพื่อหลีกเลี่ยงปัญหาการจัดเรียงนี้

สิ่งนี้ทำให้เกิดการลงโทษประสิทธิภาพเมื่อฟังก์ชั่นของคุณใช้ในองค์ประกอบย่อยและจะทำให้องค์ประกอบย่อยแสดงผลอีกครั้ง (ไม่ใช่ในกรณีของคุณ) ดังนั้นคุณไม่ควรทำ# 4

วิธีที่ดีที่สุดในขณะนี้คือการห่อตัวจัดการเหตุการณ์ของคุณไว้ในuseCallbackตะขอเพราะจะป้องกันไม่ให้ฟังก์ชันตัวจัดการของคุณถูกสร้างขึ้นในแต่ละครั้งที่มีการเรียกเรนเดอร์

import React, { useCallback } from 'react'

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

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

สำหรับการตรวจสอบข้อมูลเพิ่มเติม - useCallback docs