Cách tốt nhất để truyền tham số trong trình xử lý onClick

Đây là thành phần của tôi Tôi đang sử dụng chức năng mũi tên nội tuyến để thay đổi tuyến onClickcủa div nhưng tôi biết đó không phải là cách tốt về mặt hiệu suất

1. Chức năng mũi tên nội tuyến

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

2. Nếu tôi sử dụng ràng buộc constructor thì làm thế nào tôi có thể vượt qua đạo cụ?

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. Nếu tôi loại bỏ chức năng mũi tên thì chức năng được gọi trên chính kết xuất

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

4. Nếu tôi sử dụng liên kết nội tuyến thì nó cũng không tốt nhất với hiệu suất

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

Sau đó, làm thế nào tôi có thể tiến hành với cách tốt nhất thông qua các tham số?

Bạn có thể sử dụng chức năng mũi tên để xác định changeRoutetrình xử lý của bạn .

Điều này được gọi là Class field syntax. Thêm về nó ở đây trong các tài liệu phản ứng chính thức.

constructor() {
  super(props)
}

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

Sau đó, bạn có thể sử dụng chức năng này trực tiếp như vậy:

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

Bạn không phải lo lắng về sự ràng buộc. Các hàm mũi tên kế thừa cha mẹ của chúng this.

Bạn có thể thêm dữ liệu vào div của mình:

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

Sau đó, bạn có thể truy xuất dữ liệu đó trong trình xử lý onClick của mình:

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

# 1 là tốt

# 2 cũng là 'tốt', nhưng bạn cần phải vượt qua các đạo cụ, sau đó chức năng kết xuất sẽ trông giống hệt như # 1 . Bạn sẽ gọi hàm bind'd, vì bạn đã thay thế nó trong hàm tạo.

# 3 là sai, vì chức năng được gọi trong khi kết xuất.

Và liên quan đến # 4, từ các tài liệu phản ứng

Chúng tôi thường khuyên bạn nên ràng buộc trong hàm tạo hoặc sử dụng cú pháp trường lớp, để tránh loại vấn đề hiệu năng này.

Điều này gây ra một hình phạt hiệu năng khi chức năng của bạn được sử dụng trong các thành phần con của nó và sẽ khiến các thành phần con hiển thị lại (không phải trong trường hợp của bạn). Vì vậy, bạn không nên làm # 4 .

Cách tốt nhất hiện tại là bọc trình xử lý sự kiện của bạn trong useCallbackhook vì nó sẽ ngăn chức năng xử lý của bạn được tạo mỗi khi kết xuất được gọi.

import React, { useCallback } from 'react'

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

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

Để biết thêm thông tin, hãy kiểm tra - useCallback docs