react - virtualized 렌 더 링 빅 데이터 목록

1533 단어 react.
1. 먼저 인터넷 주 소 를 드 립 니 다. 예 를 들 어 보 세 요.https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md 2. 일부 개념 설명: 문제 발견: 일반적인 로드 방법 은 보통 드 롭 다운 요청 이 고 멈 춘 상태 가 있 습 니 다. low 로 보 입 니 다.
문제 해결: react - virtualized 는 스크롤 범위 내 에서 주어진 데이터 의 일부분 을 보 여 주 며 구성 요 소 를 보 여 주 는 데 필요 한 시간 을 대량으로 줄 이 고 DOM 노드 를 만 드 는 수량 을 줄 일 수 있 습 니 다.
단점: 너무 빨리 미 끄 러 지면 잘못 보고 할 수 있 습 니 다. 이것 은 우리 가 loading 을 추가 하여 공백 이 발생 할 수 있 는 상황 입 니 다.
3. 사용법: (구체 적 으로 위 에 있 는 주 소 를 볼 수 있다)
  // 1.    
import { InfiniteLoader, List } from 'react-virtualized';      
2.           

    {({ onRowsRendered, registerChild }) => (
      
//                   ,               
    )}
  ,
3.        ,              ,           
 isRowLoaded= ({ index })=> {
  return !!list[index];
}

loadMoreRows= ({ startIndex, stopIndex })=> {
  return fetch(`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`)
    .then(response => {
      // Store response data in list...
    })
}

rowRenderer= ({ key, index, style})=> {
  return (
    
{list[index]}
) }

좋은 웹페이지 즐겨찾기