React Native - 在ListView加載時如何提高響應能力

我有一個列表視圖我正在加載大量數據。在加載數據時，我希望其他元素（例如工具欄）能夠響應。示例代碼如下，我發現對於每100個項目，工具欄在一秒鐘內沒有響應。我的清單將超過1000個項目。React Native - 在ListView加載時如何提高響應能力

我嘗試了一些性能建議，但我無法正確調整它。有什麼建議麼？

我希望「工具欄」能夠立即響應觸摸。如果需要的話，我很高興做分頁，但我想看看其他人是否已經調整了這一點並提出了一些建議。

'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

來源

2015-10-09 ooolala

嘗試分頁..您的初始查詢應返回有限數量的條目。然後爲listview的onEndReached屬性創建一個處理程序。一旦用戶滾動看不見的數據，這應該加載下一批。 – boredgames

您可以嘗試組件SGList。這是一個稍微更優化的版本，在內存和速度方面 –

@boredgames thx，我保留分頁作爲最後的手段，因爲如果我使用ViewHolder模式，在原生android中加載得很好。 – ooolala

使用最新版本的React Native（< 0.14.0）禁用JS開發模式。通過在仿真器抖動或CTRL-M

打開設備菜單
開發設置
禁用JS開發模式

它執行。呼。

來源

2015-12-26 05:50:34 ooolala

您可以嘗試的一件事是使用onChangeVisibleRows回調來獲取可見行的列表並僅渲染這些行中的內容。

來源

2015-10-09 07:01:48

與傳呼一樣，我保留此作爲最後的手段。如果沒有其他方式可以在列表中使用超過100個項目的應用，那麼我可能需要將此作爲解決方法添加。 – ooolala

React Native - 在ListView加載時如何提高響應能力

回答

相關問題