react-原生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

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

在计算更多细节之前，如果possible.

• Require用户与应用程序交互，则
• 在服务器上执行此转换，并使用缓存；在rendering.
• Improve感知性能之前，用户不需要屏幕上大约1800条信息，只需翻译用户在渲染之前立即看到的内容。例如，翻译前三条记录，呈现它们，然后在后台翻译其余记录。

Answer 2

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