React Native - 如何在不完全重新渲染的情况下在 ListView 中添加和添加数据

Question

我一直在努力解决这个问题很长时间了。

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

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

我想我可以在将数据上传到 ListView 时使用非索引键实现此目的，但我不知道如何或在何处分配非索引键。（非索引意味着 ListView 用于比较旧行和新行的键不依赖于数据源数组的索引）

所以这些是我的问题。

如何分配非索引键？
如果我确实成功分配了非索引键，那么我是否能够制作在这两种情况下都不会重新呈现所有行的可前置和可附加的 ListView？
如果没有，那你是怎么解决这个问题的？？因为这似乎是一个非常普遍的问题，我很惊讶 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 函数中 'unshifting' 一行，在 _onEndReached 函数中 'pushing' 一行。请注意，这会起作用，但会在 _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] undefined --> re-render

Answer 1

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

React Native - 如何在不完全重新渲染的情况下在 ListView 中添加和添加数据

React Native - How to prepend AND append data in ListView without full re-render

listview

append

prepend

react-native