React Native - 如何在ListView中预先添加和附加数据而不进行完全重新渲染

Question

很长一段时间以来,我一直在努力解决这个问题.

我已经查看了StackOverflow和解决方案的其他问题,但我找不到清楚的问题.

我知道我可以在完全重新渲染前添加,但我不知道如何在没有完全重新渲染的情况下进行前置.

当我将数据上传到ListView时,我想我可以使用非索引键来实现这一点,但我不确切地知道如何或在何处分配非索引键.(非索引意味着ListView用于比较旧行和新行的键不仅仅依赖于数据源数组的索引)

所以这些是我的问题.

1. 如何分配非索引键？

2. 如果我成功分配非索引键,那么我是否能够在两种情况下都不能重新渲染所有行的BOTH可加装AND可附加ListView？

3. 如果没有,那你怎么解决这个问题？因为这似乎是一个非常常见的问题,我很惊讶ListView还没有这个功能.

*另外,我在GitHub上查看了PrependableListView,但它看起来像是ListViewDataSource的精确副本.我错过了什么？如果我在PrependableListView中遗漏了一些东西,那么有人可以指出哪里？

为了帮助理解我的问题,下面是我正在使用的测试代码.

/**
 * 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);

正如您在代码中看到的那样,我在_onRefresh函数中"取消"了一行,并在_onEndReached函数中"推"了一行.请注意,这将有效,但在_onRefresh上完全重新渲染.我需要的只是重新渲染我不移动或推动的行.

另外,这就是我认为这是如何工作的.

当我比较两个dataBlobs如下.. old:[0,1,2,3,4,5] new:[6,0,1,2,3,4,5]

ListView.DataSource中的默认检查器默认情况下将键(或RowID)指定为dataBlob数组的索引.(newsource.rowIdentities.push(Object.keys(dataBlob [sectionID]))这意味着在上面显示的情况下,new dataBlob将[0,1,2,3,4,5,6]作为键,然后比较newDataBlob [sectionID] [0] with oldDataBlob [sectionID] [0] - > 6!= 0 - >用oldDataBlob [sectionID] [1]重新渲染newDataBlob [sectionID] [1] - > 0!= 1 - - >使用oldDataBlob [sectionID] [2] - > 1重新渲染newDataBlob [sectionID] [2]!= 2 - >使用oldDataBlob [sectionID] [3]重新渲染newDataBlob [sectionID] [3] - > 2!= 3 - >使用oldDataBlob重新渲染newDataBlob [sectionID] [4] [sectionID] [4] - > 3!= 4 - >使用oldDataBlob [sectionID]重新渲染newDataBlob [sectionID] [5] ] [5] - > 4!= 5 - >用oldDataBlob [sectionID] [6]重新渲染newDataBlob [sectionID] [6] - > oldDataBlob [sectionID] [6] undefined - >重新渲染

Answer 1

尝试使用 useFlatList而不是 deprecated ListView。可能就不会出现这样的问题了...