反应本机ListView缓慢加载
我有一个简单的ListView似乎需要很长时间来加载它的项目。 我已经在发布模式下testing过，并且需要大约3秒来加载整个页面。 如果我设置了initialListSize={1}我可以看到它逐项build立列表项。
ListView JSX代码：
<ListView dataSource={this.state.dataSource} renderRow={this.renderRow} renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator} />} style={styles.listView} initialListSize={1} />
和renderRow方法：
renderRow(row) { // console.log ('rendering scale row: ' + row.numerator + ':' + row.denominator ); return ( <TouchableHighlight onPress={() => this.pressRow(row)} underlayColor="grey"> <View style={styles.rowContainer}> <Text style={styles.rowText}>{row.hasOwnProperty('label') ? row.label : row.numerator + ':' + row.denominator}</Text> <Text style={styles.rowText}>{row.hasOwnProperty('label') ? row.numerator + ':' + row.denominator : ''}</Text> </View> </TouchableHighlight> ); }
我在renderRow中没有做任何非常复杂的工作，而且数据已经在前一个视图中提取并通过props传入。
有什么我不知道，可能会影响加载/渲染时间？
这只是iOS和iPhone 4S。 我的testing中只有12-21行。
我还应该补充说，应用程序的核心是使用JUCE C ++框架，并在其中一个视图中运行一些audio处理。 我有一个audio处理线程只在该视图可见时运行 – 所有其他视图（包括具有此ListView的视图）都将停止audio处理线程。 我也尝试以类似的方式停止audio线程，但它没有任何区别。
不知道这是否会帮助你，但我可以想到三件事你可以尝试…
-
cmd+T会开启/closures“慢animation”。 这是一个远射 - 如果您正在写入console.log，请注释掉这些行。 有时他们会令人惊讶地使事情陷入困境。
- closures开发模式。 你不应该需要，但值得一试
更好的开始使用FlatList或者SectionList，因为ListView现在已经被弃用了。
https://facebook.github.io/react-native/docs/listview.html
有几个警告像你必须使用FLUX / REDUX或RELAY。 请在这里查看详情（function/注意事项） https://facebook.github.io/react-native/blog/2017/03/13/better-list-views.html