React Native：使用2個FlatLists時的性能問題

Question

我在ScrollView中有2個FlatList。一旦FlatList進入視圖，ScrollView和第二個FlatList就會落後。我試着只保留一個FlatList，它的工作非常流暢。我也使用PureComponent來呈現FlatList的每個單獨項目

class HourlyItem extends React.PureComponent { 
    render() { 
    return (
     <View style={styles.row_2_item}> 
     <Text style={styles.row_2_item_time}>11:00</Text> 
     <Image source={{uri: 'icon_sun'}} style={styles.row_2_image1}/> 
     <Text style={styles.row_2_item_temp}>25°</Text> 
     <View style={styles.row_2_item_rain_holder}> 
      <Image source={{uri: 'icon_rain_umbrella'}} style={styles.row_2_item_rain_icon}/> 
      <Text style={styles.row_2_item_rain_value}>0%</Text> 
     </View> 
     </View> 
    ) 
    } 
} 

class DailyItem extends React.PureComponent { 
    render() { 
    return (
     <View style={styles.row_2_item}> 
     <Text style={styles.row_2_item_time}>THU</Text> 
     <Image source={{uri: 'icon_cloud_sun'}} style={styles.row_2_image1}/> 
     <Text style={[styles.row_2_item_temp, {fontFamily: "avenir_medium"}]}>18°/32°</Text> 
     <View style={styles.row_2_item_rain_holder}> 
      <Image source={{uri: 'icon_rain_umbrella'}} style={styles.row_2_item_rain_icon}/> 
      <Text style={[styles.row_2_item_rain_value, {fontFamily: "avenir_medium"}]}>0%</Text> 
     </View> 
     </View> 
    ) 
    } 
} 

export class HomePage extends Component { 

_renderHourlyItem = ({item}) => (
    <HourlyItem produto={item.key}/> 
); 

    _renderDailyItem = ({item}) => (
    <DailyItem produto={item.key}/> 
); 

render() { 

     return (
      <View style={styles.container}> 
      <StatusBar hidden={true}/> 

      <View style={[styles.mainHeader, {top: this.state.mainHeaderTop}]}> 
       <Text style={[styles.innerHeaderTemp, {fontSize: 52,lineHeight: 53}]}>28°</Text> 
       <Text style={styles.innerHeaderLocation}>Kozhikode</Text> 
       <Text style={styles.innerHeaderDate}>Tuesday, Jan 17</Text> 
      </View> 

      <ParallaxScrollView 
       onScroll={this.handleScroll} 
       contentBackgroundColor="#fff" 
       parallaxHeaderHeight={PARALLAX_HEADER_HEIGHT} 
       backgroundSpeed={10} 
       fadeOutForeground={false} 

       renderBackground={() => (
       <View key="background"> 
        <View style={styles.iconHolder}> 
        <Icon style={styles.searchIcon} name="ios-search" size={25} color="rgba(0,0,0,0.75)" /> 
        </View> 
        <View style={[styles.iconHolder, styles.locationIconHolder]}> 
        <Icon style={styles.searchIcon} name="ios-pin" size={25} color="rgba(0,0,0,0.75)" /> 
        </View> 
        <Image source={{uri: 'sun', 
            width: width, 
            height: 480}} style={{resizeMode: 'cover'}}/> 
       </View> 
      )} 

       renderForeground={() => (
       <View key="parallax-header" style={[styles.parallaxHeader, {borderTopWidth: this.state.slantedHeight}]}> 

       </View> 
      )}> 

       <View style={styles.body}> 
       <View style={styles.innerHeader}> 
        <Text style={[styles.innerHeaderTemp, {fontSize: this.state.innerHeaderTempFontSize, 
                 lineHeight: this.state.innerHeaderTempLineHeight}]}>28°</Text> 
        <Text style={styles.innerHeaderLocation}>Kozhikode</Text> 
        <Text style={styles.innerHeaderDate}>Tuesday, Jan 17</Text> 
       </View> 
       <Text style={styles.summary}>Light rain on Saturday through Tuesday, with temperatures falling to 28°C on Tuesday</Text> 

       <View style={[styles.boxHolder, {backgroundColor: '#3a99d8', padding: 10}]}> 
        <FlatList 
        horizontal={true} 
        windowSize={5} 
        showsHorizontalScrollIndicator={false} 
        data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]} 
        renderItem={this._renderHourlyItem} 
        /> 
       </View>    

       <View style={[styles.boxHolder, {backgroundColor: '#975db4', padding: 10}]}> 
        <FlatList 
        horizontal={true} 
        windowSize={5} 
        showsHorizontalScrollIndicator={false} 
        data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}, {key: 'f'}]} 
        renderItem={this._renderDailyItem} 
        /> 
       </View> 

       </View> 
      </ParallaxScrollView> 
      </View> 
     ); 
    } 

正如你所看到的，我的FlatList項目裏面有很多Views。如果我刪除2或3個視圖，則性能會變得更好。但不能這樣做，因爲用戶界面需要很多觀點。

Answer 1

嘗試增加shouldComponentUpdate到你的每一個React.PureComponent

而且我似乎有性能問題時，我有一個FlatList一個ScrollView內，請嘗試移動FlatList了HTTPS的ParallaxScrollView