Question

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

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

我想要的工具栏＆＃39;立即回应接触。如果需要，我很高兴做分页，但我想知道其他人是否已经调整了这个并提出了一些建议。

    '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（＆lt; 0.14.0）禁用JS Dev Mode。

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

它表演。呼。

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

2 个答案: