React.Js에서 onScroll 이벤트 추가 및 삭제에 대한 자세한 설명

React는 프런트엔드 인터페이스 구축을 위해 Facebook에서 개발한 JS 구성 요소 라이브러리입니다. 이 라이브러리는 강력한 배경 지식 덕분에 기술 개발에 문제가 없습니다. 이번 글은 주로 React.Js에서 onScroll 이벤트 추가 및 삭제에 대한 관련 정보를 샘플 코드를 통해 자세히 소개하고 있어, 편집자가 필요한 모든 분들의 공부나 업무에 참고할 만한 가치가 있습니다. 아래에 오셔서 함께 배워보세요.

React의 장점

• 대규모 프로젝트 개발에서 데이터가 계속 변경되고 운영이 어려워지는 문제를 해결합니다.

• 컴포넌트 기반 개발로 인해 개발 속도가 빨라집니다.

• 질문을 찾는 데 도움이 됩니다. React 내부에는 빠른 부분 새로 고침을 달성하기 위해 변경해야 하는 전체 위치를 빠르게 계산할 수 있는 diff 알고리즘 세트가 있습니다. 새 테이블은 계산 후 차이점을 비교한 다음 삽입합니다.

• 머리말

모든 사람이 이러한 문제, 즉 스크롤 이벤트에 직면할 수 있습니다. p의 스크롤 이벤트를 얻는 것에 비해 ReactJS에서 p에 스크롤 이벤트를 추가하고 싶다면 기본적으로 추가가 불가능합니다. 이벤트에 스크롤 이벤트를 추가합니다.

스크롤을 구현하려면 window.addEventListener('scroll', this.onScroll.bind(this))에 스크롤 이벤트를 등록해야 합니다.

commentWillUnmount에서 window.removeEventListener('scroll', this.onScroll.bind(this))를 삭제하세요.

추가는 쉽지만 삭제는 어렵습니다. 위의 제거는 삭제할 수 없습니다. 다른 페이지에서는 스크롤을 하면 onScroll의 이벤트가 발생하게 되는데 이때 해당 컴포넌트가 삭제되어 동작할 수 없다는 오류가 발생합니다.

저도 그런 현상을 겪은 줄 알고 해결책을 찾았습니다. 스크롤을 제거하는 방법에 대한 기사를 찾았습니다.

코드는 다음과 같습니다.

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

관련 권장 사항:

HTML5에서 요소 스크롤 막대가 스크롤될 때 발생하는 onscroll 이벤트

JavaScript가 onScroll 이벤트를 발생시키는 조절 기능에 대한 자세한 설명

IE6의 onScroll 이벤트 정보 다음으로 모든 스크롤은 세 가지 버그 지침_javascript 기술을 트리거합니다

위 내용은 React.Js에서 onScroll 이벤트 추가 및 삭제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!