反应本机缓慢加载组件

时间:2018-01-29 21:18:08

标签: javascript react-native

我试图加载1051个组件,但这需要很多,也就是操纵这些数据。

SELECT R.RemoteId, L.LocalValue FROM PassThroughQuery R INNER JOIN LocalTable L ON L.LocalId = R.RemoteId where L.LocalValue = 'SomeText'

在数据中加载所有组件。比

this.state = {
    data: valori,
 }

作为回报,有;

  let newElements = this.state.data.map( (data, index) => {
      return (
        <Display enable={data.visible}>
        <View key={data.key} pass_in_data={data}>
          <Text style={[styles.categoria, {backgroundColor: colori[data.category]}]}>{data.category}</Text>
          <View style={styles.inlineBlock}>
          <Text style={styles.titoloPubblicazione} >{data.title}</Text>
          <Text style={styles.dataPubblicazione}>{data.data}</Text>
          </View>
     </View>
   </Display>
      )
  });

1 个答案:

答案 0 :(得分:1)

切换到平面列表

与滚动视图和列表视图相比,性能较高。 ScrollView一次渲染所有内容,但是平面列表具有延迟渲染项目的技术,使得速度极快。

What's the difference between ListView and FlatList?

最小例子:

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

参考Flatlist