react - virtualized 렌 더 링 빅 데이터 목록
1533 단어 react.
문제 해결: 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]}
)
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
nginx 에서 사이트 아이콘 표시 설정전단 개발 환경: react:^16.4.1 webpack:^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.