TypeScript React를 사용하여 클릭 이벤트 기능 디바운싱

Question

버튼을 여러 번 클릭하는 것을 방지하기 위해 onclick 함수에 lodash 디바운스 기능을 구현하려고 합니다. 제가 생각해낸 해결책은 다음과 같습니다.

function saveForm() {
//여기서 몇 가지 작업을 수행합니다.
}

<Button onClick={debounce(() => saveForm, 1500, {
              maxWait: 2000 })}>
              구하다
</버튼>

귀환 외부의 함수에 대해 디바운스를 수행한 다음 onclick에서 해당 디바운스 함수를 사용하는 예를 많이 봅니다. 버튼 요소에 직접 디바운스(인라인)를 수행하는 것이 잘못된 것인가요?

Answer 1

좋은 코딩 관행 측면에서 JSX에 비즈니스 로직을 너무 많이 넣는 것은 피해야 합니다. JSX 외부에서 onClick 핸들러를 추출하세요.

두 번째로, 흔들림 방지 후 돌아가고 싶지 않은 saveForm。而是调用它。所以用saveForm替换() => saveForm 것입니다.

으아악

또한 useCallback钩子。如果需要，我把使用useCallback훅에 대한 모범 사례를 탐색할 수 있습니다.