대규모 목록의 실제 기본 FlatList 성능 문제

Question

내 코드가 Json 데이터를 배열로 가져 오면 FlatList을 사용하여 데이터를 나열합니다. 전화 번호부 사진과 텍스트가 연속적으로 보입니다.

여기 내 코드입니다 :

renderItem = ({ item }) => 
    (
    <ListItem 
     title={item.username} 
     avatar={{ uri: item.photo }} 
    /> 
    ) 


    render() { 
    console.log(this.state.myData); 
    return (
     <View style={styles.container}> 
     <FlatList 
      data={this.state.myData} 
      renderItem={this.renderItem} 
     /> 
     </View> 
    ); 
    } 

그 작품과 내가 출력을 얻을 수 있지만, 성능이 느립니다. 렌더링은 사용자에게 짜증나는 약 10 초 정도 걸립니다. 빨리하기 위해 무엇을해야합니까?

Answer 1

여기에 당신이 당신의 flatlist을 최적화 할 수있는 몇 가지 개선 사항은 다음과 같습니다

1. 매김
   • 당신은 백엔드에서 데이터 페이지를 매기는 당신의 스크롤이 마지막에 가까워지고 때를 다시 반입 할 수 있습니다. onEndReached 및 onEndReachedThreshold은 도움을드립니다.
2. 업데이트는 49 네이티브 버전 반응 또는 파이버 (16)
   • 최신을위한 렌더링 모든 것이 빠르게 실행하게 놀라운 성능 향상 및 부드러운
3. 사용 PureComponent을 가지고 항목
   • PureComponent 구성 요소의 렌더링 및 메모리 사용을 향상 시키며, 렌더링 항목을 순수하게 만들면 더 나은 성능 환경을 제공합니다.
4. 정의 getItemLayout
   • 소품 그것은 항목이
     을하는 데 도움이

는 희망의 레이아웃 정의 이전에 알 수 반작용 이후 렌더링 향상