React Native - 如何在加载 ListView 时提高响应能力

Question

我有一个列表视图，正在加载大量数据。在加载数据时，我希望其他元素（例如工具栏）能够响应。示例代码如下，我发现对于每 100 个项目，工具栏会多一秒无响应。我的清单将超过 1000 项。

我尝试了一些性能建议，但无法正确调整。有什么建议吗？

我希望 'toolbar' 能够立即响应触摸。如果需要，我很乐意进行分页，但我想看看其他人是否对此进行了调整并提出了一些建议。

    'use strict';

    let _ = require('underscore');
    let React = require('react-native');
    let {Text, View, StyleSheet, TouchableHighlight, ListView, ScrollView} = React;

    let Toolbar = React.createClass({
      getInitialState: function () {
        return {
          isSearching: false
        }
      },
      _onSearch: function () {
        this.setState({ isSearching: true })
      },
      _onCancelSearch: function () {
        this.setState({ isSearching: false })
      },
      render: function () {
        let toSearchToolbar =
          <TouchableHighlight
            onPress={this._onSearch}>
            <View>
              <Text>Click to Search</Text>
            </View>
          </TouchableHighlight>

        let searchingToolbar =
          <TouchableHighlight
            onPress={this._onCancelSearch}>
            <View>
              <Text>Cancel</Text>
            </View>
          </TouchableHighlight>

        let toolbar = (this.state.isSearching) ? searchingToolbar : toSearchToolbar;

        return toolbar;
      }
    });

    let List = React.createClass({
      propTypes: {
        data: React.PropTypes.array.isRequired
      },
      getInitialState: function () {
        var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
        return {
          dataSource: ds.cloneWithRows(this.props.data),
        };
      },
      _renderRow: function (rowData) {
        return (
          <View>
            <Text>{rowData}</Text>
          </View>
        );
      },
      render: function () {
        return (
          <ScrollView>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={this._renderRow}
              initialListSize={10}
              scrollRenderAheadDistance={100}
              removeClippedSubviews={true}
              />
          </ScrollView>
        );
      },
    });

    let data = _.range(0, 1000).reverse()

    let Main = React.createClass({
      render: () => {
        return (
          <View style={styles.container}>
            <Toolbar/>
            <List data={data}/>
          </View>
        );
      }
    });

    let styles = StyleSheet.create({
      container: {
        flex: 1
      }
    });

    module.exports = Main

Answer 1

您可以尝试的一件事是使用 onChangeVisibleRows 回调来获取可见行的列表并仅呈现这些行中的内容。

Answer 2

使用最新版本的 React Native (< 0.14.0) 禁用 JS 开发模式。

在模拟器中通过摇一摇或 CTRL-M 打开设备菜单
开发设置
禁用 JS 开发模式

它执行。呼。

React Native - 如何在加载 ListView 时提高响应能力

React Native - How to improve responsiveness while ListView is loading

react-native