React 구성 요소가 뷰포트에 있는지 감지

블로그

React 구성 요소가 뷰포트에 있는지 감지

뷰포트에서 반응

구성 요소가 다음을 사용하여 뷰포트에 있는지 감지하는 라이브러리 교차로 관찰자 API

데모

일반적인 사용 사례는 구성요소가 뷰포트에 있을 때 이미지를 로드하는 것입니다( 게으른 부하 ).

전통적으로 우리는 스크롤 위치를 계속 모니터링하고 큰 스크롤 성능 병목 현상이 될 수 있는 뷰포트 크기를 계산해야 합니다.

반응 네이티브 모양

최신 브라우저는 이제 새로운 API를 제공합니다. 교차로 관찰자 API 구현을 훨씬 쉽고 효율적으로 만들 수 있습니다.

베프로 구입처

폴리필

API를 지원하지 않는 브라우저의 경우 폴리필 . 브라우저 지원 테이블

require('intersection-observer');

설계

React Hook으로 작성된 핵심 로직입니다. 우리는 두 가지 인터페이스를 제공합니다. |_+_| 고차 구성 요소(구성 요소가 클래스 기반 구성 요소인 경우)이거나 직접 후크(기능 구성 요소)를 사용합니다.

고차 구성 요소(HOC)를 래퍼로 사용하고 교차 관찰자를 대상 구성 요소에 연결합니다. 그런 다음 HOC는 구성 요소가 뷰포트에 들어오고 나갈 때 콜백 함수를 실행하는 것과 함께 뷰포트 정보를 나타내는 추가 소품을 전달합니다.

용도

구성 요소를 handleViewport HOC로 래핑하면 |_+_| 구성 요소가 뷰포트에 있는지 여부를 나타내는 소품.

|_+_| HOC는 세 개의 매개변수를 허용합니다.

handleViewport

매개변수 유형 설명
요소 반응 요소 구성 요소에 대한 콜백 함수가 뷰포트에 들어갑니다.
옵션 물체 전달하려는 옵션 교차로 관찰자 API
구성 물체 HOC용 구성, 아래 참조

지원되는 구성

매개변수 유형 기본 설명
연결 끊기 부울 파슬레 출발 후 교차로 관찰기 연결 해제

HOC 구성 요소에 대한 소품

소품 유형 기본 설명
onEnterViewport 기능 구성 요소에 대한 콜백 함수가 뷰포트에 들어갑니다.
onLeaveViewport 기능 구성 요소에 대한 콜백 함수가 뷰포트를 떠남

HOC 보존 |_+_| 그리고 |_+_| 콜백으로 소품

반응 네이티브 스위퍼

Props는 HOC에 의해 구성 요소로 전달됩니다.

소품 유형 기본 설명
인뷰포트 부울 거짓 구성 요소가 뷰포트에 있습니까?
전달된 참조 반응 참조 기능 구성 요소를 사용하는 경우 이 소품을 구성 요소의 참조로 할당하십시오.
엔터카운트 숫자 구성 요소가 뷰포트에 들어가는 시간
떠나는 횟수 숫자 구성 요소가 뷰포트를 떠나는 시간

노트 : Stateless: 추가해야 함 |_+_| 귀하의 구성 요소에

기능 구성 요소의 예

inViewport

입·퇴근 횟수 예시

  • 컴포넌트가 뷰포트에 몇 번 진입했는지 알아야 한다면 |_+_| 소품을 사용하세요.
  • 구성 요소가 뷰포트를 떠난 횟수를 알아야 하는 경우 prop |_+_|를 사용하십시오.
handleViewport

메모

이 라이브러리는 |_+_|를 사용하고 있습니다. React 요소에서 DOM에 액세스합니다. 이 메서드는 |_+_|에서 더 이상 사용되지 않으며 React 17이 나오면 코드를 업데이트하고 주요 버전을 출시할 것입니다.

html 현재 날짜 시간

이 구성 요소를 사용하는 사람

다운로드 세부 정보:

작가: 로데릭샤오

라이브 데모: https://roderickhsiao.github.io/react-in-viewport

깃허브: https://github.com/roderickhsiao/react-in-viewport

#react #자바스크립트 #reactjs #react-js