listview - React Native - 如何在 ListView 中添加和追加数据而不需要完全重新渲染

Question

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

我查看了 StackOverflow 和其他问题来寻找解决方案，但找不到明确的解决方案。

我知道我可以在完全重新渲染的情况下进行前置，但我不知道如何在不完全重新渲染的情况下进行前置。

我认为当我将数据上传到ListView时我可以使用非索引键来实现这一点，但我不知道如何或在哪里分配非索引键。 (非索引意味着 ListView 用于比较旧行和新行的键不只依赖于数据源数组的索引)

这就是我的问题。

1. 如何分配非索引键？

2. 如果我确实成功分配非索引键，那么我是否能够使可前置和可 append 的 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 上完全重新渲染。我需要的只是重新渲染我未移动或推送的行。

另外，我认为这就是它的工作原理。

当我比较两个 dataBlob 时，如下所示..旧:[0,1,2,3,4,5]新:[6,0,1,2,3,4,5]

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

Answer 1

尝试使用 FlatList 而不是已弃用的 ListView。可能不会有这样的问题...