전달 인수에 대한 반응 후크에서 클릭 이벤트에 대한 구문

전달 인수에 대한 반응 후크에서 클릭 이벤트에 대한 구문

React class 구성 요소에서 이는 항상 나에게 큰 도움이 되었다.

let myValue: string = "Hello World";
<Button onClick={this.handleClick.bind(this, myValue)}></Button>

나는 React Hooks 문서에서 이 구문을 찾았고 나는 그것을 좋아하지만 그것이 항상 값을 되돌려주지는 않는다.

<Button onClick={handleClick} value={myValue}></Button>

이 구문은 작동하지만 타이핑이 어렵고 지저분해 보인다.

<Button onClick={() => handleClick(myValue)}></Button>

이것은 갈고리와 함께 작동하는 또 다른 방법이지만, 나에게는 진부한 것처럼 보인다.

  <Button onClick={handleClick.bind(null, myValue)}></Button>

나는 너무 많은 선택으로 혼란스러워.이것을 하는 가장 좋은 방법만 있지 않은가?

이 방법은 다음과 같다.

<Button onClick={() => handleClick(myValue)}></Button>

유일한 단점은 다음과 같다.onClick프로펠러는 각 렌더에 새로운 값을 가지며 순수하더라도 하위 구성요소의 재조정을 유발한다.이는 특정 구성 요소에 따라 성능 문제를 일으킬 수도 있고 그렇지 않을 수도 있다. 이는 많은 경우 문제가 될 수 있다.Button인스턴스나 리렌더는 비싸다.

값이 정적인 경우 콜백을 구성 요소 외부의 상수 기능으로 정의할 수 있다.

// outside function component
const myValue = "Hello World";
const myHandleClick = () => handleClick(myValue);
...
// inside function component
<Button onClick={myHandleClick}></Button>

값이 동적이고 구성 요소 내에서만 사용할 수 있는 경우, 구성 요소 내부에서 함수를 정의하고 다음 항목으로 메모할 수 있다.useMemo또는useCallback후크(이미 언급된 다른 대답):

// inside function component
const myHandleClick = useCallback(() => handleClick(myValue), [myValue]);
...
<Button onClick={myHandleClick}></Button>

질문의 첫 번째 버전과 마지막 버전은 모두 새로운 기능을 생성하므로 해당 기능을 제공하는 것만으로도 벗어날 수 있는지 여부handleClick소품이라면 그렇게 해야 해

인수를 함수에 전달해야 하는 경우에도 함수 구성 요소에서 첫 번째 버전을 사용할 수 있지만, 그 이후부터this사용하지 않고, 설정만 하면 된다.null.

<Button onClick={handleClick.bind(null, myValue)}></Button>

참조URL: https://stackoverflow.com/questions/55519723/what-is-the-syntax-for-click-events-in-react-hooks-for-passing-arguments