다음은 FlatList 성능 향상에 도움이 될 수 있는 소품 목록입니다.
1. removeClippedSubviews
- 타입: Boolean
- 기본: False
- true 인 경우, 뷰포트 외부에 있는 뷰는 기본 뷰 계층 구조에서 분리됩니다.
장점
이렇게 하면 기본 렌더링 및 도면 트래버설에서 뷰포트 외부의 뷰를 제외하여 메인 스레드에 걸리는 시간을 줄이고 프레임 손실 위험을 줄일 수 있습니다.
true로 설정하는 경우 화면에서 벗어난 아이템을 unmount하여 메모리를 아껴줍니다.
단점
이 구현에는 특히 변환 및/또는 절대적인 포지셔닝으로 복잡한 작업을 수행하는 경우 컨텐츠 누락과 같은 버그가 있을 수 있습니다. 또한 뷰는 할당 해제되지 않고 분리되어 있기 때문에 메모리를 크게 절약할 수 없습니다.
2. maxToRenderPerBatch
- 타입: Number
- 기본: 10
VirtualizedList통과할 수 있는 소품입니다 FlatList. 이것은 모든 스크롤에서 렌더링되는 다음 항목 청크인 일괄 처리당 렌더링되는 항목의 양을 제어합니다.
장점
더 큰 숫자를 설정하면 스크롤할 때 시각적 공백 영역이 줄어듭니다. (채우기 비율 증가)
단점
배치당 항목이 많을수록 JavaScript 실행 기간이 길어져 프레스와 같은 다른 이벤트 처리가 차단되어 응답성이 저하될 수 있습니다.
3. updateCellsBatchingPeriod
- 타입: Number
- 기본: 50
maxToRenderPerBatch는 배치당 렌더링되는 항목의 양을 나타내지만 updateCellsBatchingPerBatch를 설정하면 VirtualizedList에 배치 렌더링 간의 지연 시간(구성 요소가 창으로 표시된 항목을 렌더링하는 빈도)이 표시됩니다.
장점
이 소품을 maxToRenderPerBatch 와 결합하면 예를 들어 빈도가 낮은 배치에서 더 많은 항목을 렌더링하거나 빈도가 높은 배치에서 더 적은 항목을 렌더링할 수 있습니다.
단점
배치 빈도가 낮으면 빈 영역이 발생할 수 있으며, 배치 빈도가 높으면 반응성 문제가 발생할 수 있습니다.
4. initialNumToRender
- 타입: Number
- 기본: 10
렌더링할 항목의 초기 양입니다.
장점
모든 장치에 대해 화면을 포함할 수 있는 정확한 항목 수를 정의합니다. 이는 초기 렌더의 성능을 크게 향상시킬 수 있습니다.
단점
initialNumToRender를 낮게 설정하면 공백 영역이 발생할 수 있습니다. 특히, 너무 작아서 초기 렌더의 뷰포트를 덮을 수 없는 경우에는 더욱 그렇습니다.
5. windowSize
- 타입: Number
- 기본: 21
여기에 전달된 숫자는 1이 뷰포트 높이와 동일한 측정 단위입니다. 기본값은 21(위 10개 뷰포트, 10개 아래, 1개 사이)입니다.
장점
windowSize가 클수록 스크롤하는 동안 빈 공간을 볼 가능성이 줄어듭니다. 반면 windowSize가 작으면 동시에 마운트되는 항목이 줄어들어 메모리가 절약됩니다.
단점
windowSize 가 클수록 메모리 사용량이 증가합니다. windowSize가 작을 경우 빈 영역이 더 많이 표시됩니다.
6. Use cached optimized images
- 캐시된, 최적화된 이미지 사용
커뮤니티 패키지 @DylanVann의 react-native-fast-image 를 사용하여 보다 뛰어난 이미지를 만들 수 있습니다. 목록의 모든 이미지는 새 이미지() 인스턴스입니다. 로드된 후크에 빨리 도달할수록 JavaScript 스레드가 다시 더 빨리 자유로워집니다.
7. Use getItemLayout
모든 목록 항목 구성 요소의 높이(또는 가로 목록의 경우 너비)가 동일한 경우 getItemLayout소품을 제공하면 플랫리스트가 비동기 레이아웃 계산을 관리할 필요가 없습니다. 이것은 매우 바람직한 최적화 기법입니다.
구성요소의 크기가 동적이고 성능이 정말 필요한 경우, 설계 팀에 더 나은 성능을 위해 재설계를 고려할 수 있는지 물어보는 것을 고려해 보는게 좋을 것 같습니다.
// getItemLayout 속성을 정의해 주면 item의 레이아웃 크기가
// 매번 계산되지 않아도 되므로 성능 개선에 효과적
// renderItem의 소품 높이
const ITEM_HEIGHT = 200;
const getItemLayout = (data, index) => ({
length: ITEM_HEIGHT,
offset: ITEM_HEIGHT * index,
index,
});
<FlatList
data={DATA}
renderItem={renderItem}
getItemLayout={getItemLayout}
/>
8. Use keyExtractor or key
keyExtractor를 FlatList 구성 요소로 설정할 수 있습니다. 이 소품은 캐시 및 항목 재순서를 추적하는 React 키로 사용됩니다.
9. Avoid anonymous function on renderItem
렌더 함수가 호출될 때마다 다시 생성되지 않도록 renderItem 함수를 렌더 함수의 외부로 이동합니다.
// 외부로 분리
const renderItem = ({ item }) => (
<View key={item.key}>
<Text>{item.title}</Text>
</View>
);
return (
...
<FlatList data={items} renderItem={renderItem} />;
...
);
10. Use basic components
구성 요소가 복잡할수록 렌더링 속도가 느려집니다. 목록 항목에서 많은 논리와 중첩을 피하십시오. 앱에서 이 목록 항목 구성 요소를 많이 재사용하는 경우 큰 목록에 대해서만 구성 요소를 만들고 가능한 한 적은 논리와 중첩으로 구성합니다.
11. Use light components
구성 요소가 무거울수록 렌더링 속도가 느려집니다. 무거운 이미지를 피하는게 좋습니다.(목록 항목에 대해 잘린 버전이나 축소판을 가능한 한 작게 사용). 디자인 팀과 이야기하고 목록에서 가능한 한 적은 효과와 상호 작용 및 정보를 사용하는게 좋습니다.
