React에서 후크를 사용하여 이벤트 핸들러를 만드는 올바른 방법입니까?

React에서 후크를 사용하여 이벤트 핸들러를 만드는 올바른 방법입니까?

일반적인 클래스 기반 React 컴포넌트에서는 다음과 같이 이벤트핸들러를 만듭니다.

class MyComponent extends Component {
  handleClick = () => {
    ...
  }

  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

그러나 후크 기반의 기능 패러다임을 사용할 때는 다음 두 가지 옵션이 있습니다.

const MyComponent = () => {
  const [handleClick] = useState(() => () => {
    ...
  });

  return <button onClick={handleClick}>Click Me</button>;
};

또는 다음 중 하나를 선택합니다.

const MyComponent = () => {
  const handleClick = useRef(() => {
    ...
  });

  return <button onClick={handleClick.current}>Click Me</button>;
};

어떤 것이 객관적으로, 어떤 이유로 더 나은가?내가 아직 듣지도 못했고 발견하지도 못한 다른 방법이 있을까?

도와주셔서 고맙습니다.

편집: 여기 Code Sandbox에 두 가지 방법을 보여 주는 예를 넣었습니다.또, 각 렌더링의 이벤트 핸들러를 불필요하게 재현하는 것은 아닌 것 같기 때문에, 그 코드에서 알 수 있듯이, 퍼포먼스상의 문제는 있을 수 없다고 생각합니다.

저도 추천하지 않겠습니다.useState또는useRef.

사실 여기에는 갈고리가 전혀 필요 없습니다.대부분의 경우 간단하게 다음 작업을 수행할 것을 권장합니다.

const MyComponent = () => {
  const handleClick = (e) => {
    //...
  }

  return <button onClick={handleClick}>Click Me</button>;
};

---

그러나 렌더링 함수(예:jsx-no-lambdatslint 규칙).여기에는 두 가지 이유가 있습니다.

1. 불필요한 기능의 선언을 피하기 위한 퍼포먼스 최적화.
2. 순수한 구성 요소의 불필요한 재렌더를 방지하기 위해.

첫 번째 포인트는 크게 걱정하지 않습니다. 후크는 기능 내에서 기능을 선언하고, 그 비용이 앱 성능의 주요 요인이 될 가능성은 낮습니다.

그러나 두 번째 포인트는 때때로 유효합니다. 즉, 컴포넌트가 최적화되어 있는 경우(예: 사용)React.memo또는 로서 정의됨으로써PureComponent새로운 소품을 제공했을 때만 재실행되도록 새로운 기능 인스턴스를 전달하면 컴포넌트가 불필요하게 재실행될 수 있습니다.

이를 처리하기 위해 React는 콜백을 메모하기 위한 후크를 제공합니다.

const MyComponent = () => {
    const handleClick = useCallback((e) => {
        //...
    }, [/* deps */])

    return <OptimizedButtonComponent onClick={handleClick}>Click Me</button>;
};

useCallback는 필요한 경우에만 새로운 함수를 반환하기 때문에(deps 배열 변경에 값을 포함)OptimizedButtonComponent필요이상으로 재검출되지 않습니다.여기서 문제 #2에 대해 설명하겠습니다.(이 문제는 문제 #1에 대해 설명하지 않습니다.렌더링을 할 때마다 새로운 함수가 생성되어 에 전달됩니다.useCallback)

하지만 난 필요할 때만 이걸 할 거야.모든 콜백을 로 묶을 수 있습니다.useCallback그리고 그것은 효과가 있을 것이다...그러나 대부분의 경우 도움이 되지 않습니다.<button>메모된 콜백은 도움이 되지 않습니다.<button>최적화된 컴포넌트가 아닙니다.

언급URL : https://stackoverflow.com/questions/55001372/correct-way-to-create-event-handlers-using-hooks-in-react