React에서 흔들림 방지 후크를 사용하는 방법

Question

아아아아

저는 useDebounce후크를 만들어 사용하곤 했어요. 그러나 크기 조정 이벤트에서 useDebounce를 사용하는 데에는 몇 가지 문제가 있습니다. useDebounce hook 내부적으로 useEffect를 사용하므로 구성 요소 위에서 실행해야 합니다. 그러나 resize 함수는 아래와 같이 useEffect에서 실행되도록 설정되어 있습니다.

그리고 위의 코드도 그 값을 인자로 받아들이는데, 아래의 코드를 사용하려면 콜백으로 받아야 할 것 같아요.

으아아아

위 코드를 사용하여 기존 useDebounce를 활용하는 방법은 무엇입니까?

Answer 1

React 구성 요소에서 직접 디바운싱된 함수를 사용하는 경우 각 렌더링마다 새 함수가 생성되므로 작동하지 않습니다. 대신 다음 useDebounce후크를 사용할 수 있습니다.

으아아아

useRef 确保它与上次提供的函数相同，并且 useLayoutEffect 렌더링할 때마다 함수에 대한 참조가 업데이트되는지 확인하세요.

이에 대한 자세한 내용은 "최신 참조" 모드 반응

을 참조하세요.

Answer 2

제 생각에는 useEffect를 통해 디바운스를 구현하는 것보다 디바운스 로직을 함수로 구현하는 것이 더 낫다고 생각합니다.

useEffect 当deps 引用的状态改变时执行。也就是说，由于是一个如果只按照执行流程就容易漏掉的逻辑，所以后期维护时很难弄清楚这个useEffect deps에서 참조하는 상태가 변경되면 실행됩니다. 즉, 실행 과정만 따라가면 놓치기 쉬운 로직이기 때문에, 추후 유지보수 시 이

가 어떤 프로세스에서 파생되었는지 파악하기 어렵고 디버깅도 어렵습니다.

예

自定义反跳

으아악 으아악 lodash

를 사용하는 경우에는 가져오기만 하면 사용할 수 있습니다.

Lodash Debounce

으아악 으아악

도움이 되기를 바랍니다 :)🎜