React Native - How to Add and Add Data to ListView Without Full Reprocessing

Question

I worked a lot on solving this problem for a long time.

I looked at StackOverflow and other problems to solve, but I could not find a clear one.

I know that I can add WITH full re-render, but I do not know how I can add WITHOUT full reprocessing.

I think I can achieve this with a non-index key when I load data into a ListView, but I don't know exactly how and where to assign a non-index key. (non-index means that the keys used by ListView to compare old rows and new rows are NOT dependent on the index of the data source array)

So these are my questions.

• How to assign a non-index key?

• If I manage to assign non-index keys, can I make a BOTH incremental and incremental ListView that DOES NOT REVERSE all rows in both cases?

• If not, how do you solve this problem? Because this seems like a very common problem, and I am very surprised that ListView does not have this feature yet.

* Also, I looked at PrependableListView on GitHub, but it seems like an exact instance of ListViewDataSource .. Am I missing something? If there is something that I missed in the PrependableListView, then can anyone point out where?

To understand my problem, below is the test code I'm using.

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, ListView, RefreshControl, View } from 'react-native'; export default class Test1 extends Component { constructor(props){ super(props); const arr = []; this.state = { dataSource: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}), refreshing: false, }; } componentWillMount(){ this.arr = []; for(let i = 0; i < 16; i++){ this.arr.push({keyy: i, data: "row " + i}); } this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.arr), }); } _onRefresh() { this.setState({refreshing: true}); let i = this.arr.length; let arr1 = []; arr1.unshift({keyy: i, data: "row " + i}); for(var index = 0; index < this.arr.length; index++){ arr1.push(this.arr[index]); } // console.log(this.arr); // console.log("arr1 : " + arr1.length); this.setState({ dataSource: this.state.dataSource.cloneWithRows(arr1), refreshing: false, }); } _renderRow(rowData: string, sectionID: number, rowID: number){ // console.log(rowData.data + " : " + sectionID + " : " + rowID); return( <Text style={{fontSize: 50}}>{rowData.data}</Text> ); } _onEndReached(){ let i = this.arr.length; let arr1 = []; for(var index = 0; index < this.arr.length; index++){ arr1.push(this.arr[index]); } arr1.push({keyy: i, data: "row " + i}); this.setState({ dataSource: this.state.dataSource.cloneWithRows(arr1), }); } render() { return ( <ListView dataSource={this.state.dataSource} renderRow={this._renderRow.bind(this)} refreshControl={ <RefreshControl refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } onEndReachedThreshold={0} onEndReached={this._onEndReached.bind(this)} /> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('Test1', () => Test1); 

As you can see in the code, I "do not cross" the line in the _onRefresh function and "click" the line in the _onEndReached function. Keep in mind that this work will work, but with full reprocessing on _onRefresh. What I need is ONLY re-rendering the line that I disabled or clicked.

Also, this is what I think how it works.

When I compare two dataBlobs as below. old: [0,1,2,3,4,5] new: [6,0,1,2,3,4,5]

by default, the checker in the ListView.DataSource will by default assign keys (or RowID) as indexes to the dataBlob array. (Newsource.rowIdentities.push (Object.keys (dataBlob [sectionID])) This means that in the above example, the new dataBlob will have [0,1,2,3,4,5,6] as keys, and then compare newDataBlob [sectionID] [0] with oldDataBlob [sectionID] [0] → 6! = 0 → re-render newDataBlob [sectionID] [1] with oldDataBlob [sectionID] [1] → 0! = 1 → re-render newDataBlob [sectionID] [2] with oldDataBlob [sectionID] [2] → 1! = 2 → re-render newDataBlob [sectionID] [3] with oldDataBlob [sectionID] [3] → 2! = 3 → re-render newDataBlob [sectionID ] [4] with oldDataBlob [sectionID] [4] → 3! = 4 → re-render newDataBlob [sectionID] [5] with oldDataBlob [sectionID] [5] → 4! = 5 → re-render newDataBlob [sectionID] [ 6] with oldDataBlob [sectionID] [6] → oldDataBlob [sectionID] [6] undefined → re-render

Answer 1

Try using FlatList instead of obsolete ListView . It is possible that he will not have such a problem ...