react-native array.map() 性能

Question

我有一个应用程序正在获取 JSON 数组和数组映射它们。原始地图中有两个嵌套的数组地图。

数组中有 75 个单独的结果 - 其中包含 6 个对象和 1 个数组。所以平均有大约 1800 个元素需要映射。

完成提取大约需要 2 秒，而数组映射可能需要 8-10 秒。

有什么办法可以提高这个速度吗？

trains.results.services.map((traininfo,index) => (

<ScrollView refreshControl={
<RefreshControl refreshing={this.state.refreshing} onRefresh= {this._onRefresh.bind(this)} /> }  key={traininfo.std+index.toString()} style={styles.slide1}>

<View key={'row'+index.toString()}  style={{flex: 1, flexDirection: 'row'}}>

{traininfo.platform===null ? (
<Text key={traininfo.platform+index.toString()} style={styles.platform}>Platform _</Text>
          ) : (
 <Text key={traininfo.platform+index.toString()} style={styles.platform}>Platform {traininfo.platform}</Text>
          )}  

{traininfo.etd==='On time' || traininfo.etd==='Cancelled' || traininfo.etd==='Delayed' ? (
<Text key={traininfo.etd+index.toString()} style={styles.time}>{traininfo.etd}</Text>
          ) : (
<Text key={traininfo.etd+index.toString()} style={styles.time}>Exp: {traininfo.etd}</Text>
          )}

         </View>

         {Object.keys(traininfo.destination).length>1 ? (

           traininfo.destination.map((dest,index) => (

          <View key={'cont'+index.toString()}>
             <View key={'row1'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
             {index===0 ? (
               <Text key={traininfo.std+index.toString()} style={styles.std}>{traininfo.std}</Text>
               ) : (<Text key={traininfo.std+index.toString()} style={styles.std1}>{traininfo.std}</Text>)}

             <Text style={styles.destination}>{dest.locationName}</Text>
             </View>
             <View key={'row11'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {dest.via !== null ? (
             <Text key={dest.via+index.toString()} style={styles.via}>{dest.via}</Text>
            ) : (null)}
            </View>
             </View>

            ))

          ) : (

          <View>
           <View key={'row1'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
           <Text key={traininfo.std+index.toString()} style={styles.std}>{traininfo.std}</Text>
          <Text key={traininfo.destination[0].locationName+index.toString()}  style={styles.destination}>{traininfo.destination[0].locationName}</Text>  
          </View>

           <View key={'row11'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {traininfo.destination[0].via !== null ? (
             <Text key={traininfo.destination[0].via+index.toString()} style={styles.via}>{traininfo.destination[0].via}</Text>
            ) : (null)}
            </View>

            </View>

          )}

           {traininfo.delayReason || traininfo.cancelReason  ? (

          <View key={'delay'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>

          {traininfo.delayReason !== "undefined" ? (
            <Text key={'delayReason1'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Medium', fontSize:16,marginBottom:0,marginTop:10}}>{traininfo.delayReason}</Text>
            ) : (null)}

           {traininfo.cancelReason !== "undefined" ? (
            <Text key={'delayReason2'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Medium', fontSize:16,marginBottom:0,marginTop:10}}>{traininfo.cancelReason}</Text>
            ) : (null)}

         </View>             

          ) : (
          null
          )}

           <View key={'length'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>    
             {traininfo.length !== null ? (
             <Text key={traininfo.length+index.toString()} style={styles.length}>{traininfo.length} Car Train</Text>
            ) : (null)}
          </View>   

        <View key={'row2'+index.toString()} style={{flex: 1, flexDirection: 'row'}}>
         <Text key={'calling'+index.toString()} style={{color:'#fff',fontFamily:'Lato-Bold', fontSize:18,marginBottom:0,marginTop:10}}>Callling at:</Text>
         </View>

         <View key={'dest'+index.toString()} style={{marginBottom:40,marginTop:10}}>

         <View key={'destview'+index.toString()} style={{backgroundColor:'black'}}>


               {traininfo.dest[0].map((stops,index) => (


                 <View key={stops.crs}>

              {index===Object.keys(traininfo.dest[0]).length-1 ? (
              <Image key={stops.crs+'1'}  source={require('../Images/dest.png')} style={{width:22,height:22,position:'absolute',top:8,zIndex:9999}}/>
            ) : (

               <Image key={stops.crs+'2'} source={require('../Images/dest1.png')} style={{marginLeft:7,width:30,height:52,position:'absolute',top:15,zIndex:9999}}/>
            ) }

              {stops.et==='On time' ? (

             <View key={stops.crs+'3'}>
             <Text key={stops.crs+'4'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             <Text key={stops.crs+'5'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}</Text>
             </View>

            ) : (

            <View key={stops.crs+'6'}>
            <Text key={stops.crs+'7'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             {stops.et==='Cancelled' || stops.et==='Delayed'  ? (
               <Text key={stops.crs+'8'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  {stops.et}</Text></Text>
              ) : (
               <Text key={stops.crs+'9'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  Exp: {stops.et}</Text></Text>
              ) }

             </View>
            )}

              </View>

              ))}

               {traininfo.dest.length===2 ? (

                    traininfo.dest[1].map((stops,index) => (


                                 <View key={stops.crs}>

              {index===Object.keys(traininfo.dest[1]).length-1 ? (
              <Image key={stops.crs+'1'}  source={require('../Images/dest.png')} style={{width:22,height:22,position:'absolute',top:8}}/>
            ) : (

               <Image key={stops.crs+'2'} source={require('../Images/dest1.png')} style={{marginLeft:7,width:30,height:52,position:'absolute',top:15}}/>
            ) }



              {stops.et==='On time' ? (

             <View key={stops.crs+'3'}>
             <Text key={stops.crs+'4'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             <Text key={stops.crs+'5'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}</Text>
             </View>

            ) : (

            <View key={stops.crs+'6'}>
            <Text key={stops.crs+'7'} style={{color:'#fff',fontSize:20,fontFamily:'Lato-Medium',marginTop:4,paddingLeft:37}}>{stops.loc}</Text>
             {stops.et==='Cancelled' || stops.et==='Delayed'  ? (
               <Text key={stops.crs+'8'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  {stops.et}</Text></Text>
              ) : (
               <Text key={stops.crs+'9'} style={{fontSize:14,color:'#fff001',marginLeft:37}}>{stops.st}<Text style={{fontSize:14,color:'#33b2f4',marginLeft:37}}>  Exp: {stops.et}</Text></Text>
              ) }

             </View>
            )}

              </View>

                ))

                ) : (null)}

         </View>
         <Text style={{color:'#fff',fontSize:22,marginTop:20, fontFamily:'Lato-Bold'}}>{traininfo.operator}</Text>
         </View>

      </ScrollView>

        ))

Answer 1

我建议您使用 Flatlist。这可以更加灵活和完全跨平台。它还具有分页功能，可用于提高速度和性能。请通过这个link

Answer 2

虽然您可能会看到切换到 for 循环有一点好处，但您可以先尝试其他一些方法：

• 在服务器上执行此转换并尽可能使用缓存。
• 要求用户在计算更多细节之前与应用程序交互；用户在渲染之前不需要在屏幕上显示约 1800 条信息。
• 通过仅翻译用户在渲染前立即看到的内容来提高感知性能。例如，翻译前三个记录、呈现它们，然后在后台翻译其余记录。