스크롤 이벤트를 수신 및 수신 대기

Question

사용자 세션 전체에서 스크롤/마우스 이벤트를 수신해야하는 성능에 민감한 Redux 앱을 빌드합니다.

일반 영어 구현은 다음과 같습니다 내 이해에서

"구성 요소 A가 사용자의 뷰포트, 파견 FOO 조치에있을 때"

이

, 함수 calculateViewPort + 비교 검사가 수행 될 필요가있다 모든 스크롤 이벤트에 저장하십시오.

과도하고 느립니다 (아직 테스트하지 않았습니다).

아직 고려하지 않은 다른 구현이나 접근법이 있습니까?

Redux 용 RxJS와 같은 것을 사용하려고 생각했지만 성능을 위해 새 라이브러리를 가져 와서 기존 툴킷으로 해결하는 것의 절충안을 고려하고 싶습니다.

무언가 접근법이 있다면, 나는 그것에 대해서도 더 개방적입니다.

Answer 1

InfiniteScroll 구성 요소가 있습니다. 이것을 참조하고 자신의 방식으로 구현하거나 그대로 사용할 수 있습니다.

참고 :이 구성 요소에는 redux-saga이 사용되지 않습니다.

효과로 최신 api 호출 (마지막 마우스 스크롤)에서 오는 응답 만 받아들이면 redux-saga과 함께하는 것이 좋습니다.

Answer 2

React Visibility Sensor 여기에서 선택하는 것이 좋습니다. VisibilitySensor 구성 요소에 구성 요소를 래핑하고 창 뷰포트에있을 때마다 액션을 전달할 수 있습니다.

import React from 'react' 
import { connect } from 'react-redux' 
import VisibilitySensor from 'react-visibility-sensor' 

import CUSTOM_ACTION from 'your-actions' 

const CustomComponent = (noticeMe, ...children) => { 
     const handleChange = (isVisible) => { if (isVisible) { noticeMe(); } } 
     return <VisibilitySensor>{children}</VisibilitySensor> 
    } 
export connect({}, { 
    noticeMe:() => dispatch(CUSTOM_ACTION) 
})(CustomComponent)