onClick 핸들러에서 매개 변수를 전달하는 가장 좋은 방법

이것은 onClickdiv 의 경로를 변경하기 위해 인라인 화살표 기능을 사용하는 구성 요소 이지만 성능면에서 좋은 방법은 아니라는 것을 알고 있습니다

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 함수를 호출합니다 .

렌더링하는 동안 함수가 호출되므로 # 3 은 잘못되었습니다.

그리고 # 4에 대해서는 반응 문서에서

이런 종류의 성능 문제를 피하려면 일반적으로 생성자에서 바인딩하거나 클래스 필드 구문을 사용하는 것이 좋습니다.

이로 인해 하위 구성 요소에서 함수를 사용하면 성능이 저하되고 하위 구성 요소가 다시 렌더링됩니다 (귀하의 경우는 아님). 따라서 # 4 하지 말아야합니다 .

현재 가장 좋은 방법은 이벤트 핸들러를 useCallback훅으로 감싸서 렌더링이 호출 될 때마다 핸들러 함수가 작성되지 않도록하는 것입니다.

import React, { useCallback } from 'react'

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

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

자세한 정보 확인- 콜백 문서 사용