React의 디바운싱과 스로틀링

React의 디바운싱과 스로틀링

디바운싱과 제한은 모두 함수가 실행되는 속도를 제어하는 ​​기술로, 크기 조정, 스크롤, 입력과 같은 이벤트를 처리할 때 성능을 향상시키는 데 자주 사용됩니다. 간단한 설명은 다음과 같습니다.

---

1. 디바운싱

정의: 마지막으로 호출된 시간으로부터 지정된 지연 후에 함수를 실행합니다. 이벤트가 계속 발생하면 타이머가 재설정됩니다.

사용 사례: 사용자가 이벤트 트리거를 중지한 후 함수가 한 번만 실행되기를 원하는 경우.
예: 사용자가 검색창에 입력을 중단한 후 API 호출.

코드 예시(React의 디바운싱)

"react"에서 React, { useState } 가져오기;

함수 디바운스(func, 지연) {
타이머를 두세요;
반환(...args) => {
ClearTimeout(타이머); // 이전 타이머 지우기
타이머 = setTimeout(() =>func(...args), 지연); // 새 타이머 설정
};
}

const 앱 = () => {
const [value, setValue] = useState("");

const handlerChange = debounce((e) => {
console.log("API 호출:", e.target.value);
}, 1000);

반품(
유형="텍스트"
onChange={(e) => {
setValue(e.target.value);
handlerChange(e);
}}
값={값}
placeholder="뭔가를 입력하세요..."
/>
);
};

기본 앱 내보내기

동작: 함수(handleChange)는 사용자가 1초 동안 입력을 중단한 후에만 실행됩니다.

---

1. 제한

정의: 이벤트가 계속 발생하더라도 지정된 시간 간격에 최대 한 번 함수를 실행합니다.

사용 사례: 빈번한 이벤트 중에 일정한 간격으로 기능을 실행하고 싶을 때.
예: 스크롤하는 동안 페이지 위치 로깅

코드 예시(React의 조절)

"react"에서 React, { useEffect } 가져오기;

throttle 기능(func,limit) {
let lastFunc;
마지막 시간을 보자;
반환(...args) => {
const now = Date.now();
if (!lastTime || 지금 - lastTime >= 제한) {
func(...args);
마지막 시간 = 지금;
} 그 밖의 {
ClearTimeout(lastFunc);
lastFunc = setTimeout(() => {
if (Date.now() - lastTime >= 제한) {
func(...args);
lastTime = Date.now();
}
}, 제한 - (현재 - 마지막 시간));
}
};
}

const 앱 = () => {
const handlerScroll = throttle(() => {
console.log("기록된 스크롤 이벤트:", window.scrollY);
}, 1000);

useEffect(() => {
window.addEventListener("scroll", handlerScroll);
반환() => window.removeEventListener("scroll", handlerScroll);
}, []);

돌아가기

페이지를 아래로 스크롤하세요.
};

기본 앱 내보내기

동작: handlerScroll 함수는 스크롤 이벤트가 지속적으로 발생하더라도 최대 1초에 한 번씩 스크롤 위치를 기록합니다.

---

위 내용은 React의 디바운싱과 스로틀링의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!