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

虽然你可能会看到切换到for循环的一些好处，但还有一些其他的事情要先尝试：

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

Answer 2

我建议你使用Flatlist。这可以更灵活，更完全跨平台。它还具有分页功能，可用于提高速度和性能。请仔细阅读link

react-native array.map（）性能

2 个答案: