react-native – 如何添加/删除项目到ListView？

发布时间：2020-12-15 06:35:16 所属栏目：百科来源：网络整理

导读：我们可以像这样为ListView创建一个数据源 var ds = new ListView.DataSource({rowHasChanged: (r1,r2) = r1 !== r2}); var dataSource = ds.cloneWithRows(['row 1','row 2']),}; 但是，如果我想从数据源中添加项目或删除项目，我该怎么做？我需要总是使用更

我们可以像这样为ListView创建一个数据源

var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1 !== r2});  
var dataSource =  ds.cloneWithRows(['row 1','row 2']),};

但是，如果我想从数据源中添加项目或删除项目，我该怎么做？我需要总是使用更新的数组调用cloneWithRows吗？

是的，调用cloneWithRows(…)

React Native文档不涵盖ListViewDataSource对象，因此阅读source code中的注释可以帮助您了解它的工作原理。

一些可能有帮助的笔记：

> cloneWithRows(data)有点误导性地命名，因为它不只是创建一个数据的克隆名称。
>而是尝试将新的数据行与dataSource中的现有行(如果有的话)进行比较，并确定是否存在要插入的新行或需要替换或删除的现有行。
源代码注释注意到，数据源中的数据是不可变的，所以改变它的正确方法是指定更新的数据源，即调用cloneWithRows(…)。

通过整个列表只是为了改变几行似乎是不直观的，但是有几个原因为什么它是有道理的：

>首先，它与React的整体flux-based architecture相匹配，其中重点是设置状态，并允许组件找出如何突变自己来反映新状态(想想这个.props或this.state的工作原理)。您可以随意更改ListView组件之外的数据数组，但一旦准备好更新组件，就可以将整个状态传递到组件中，从而可以更新自身。
>第二，它是非常有效的。在开始渲染过程之前，ListView会在Javascript中进行粗排区分，然后在渲染周期中一次渲染一行(可以为adjust this)，以减少帧丢失。>第三，这里没有排除在将来支持.addRow(..)方法的可能性。关键是当前的实现并不是一个糟糕的开始，因为它提供了一个基于状态的界面，允许开发人员不用担心列表组件在状态之间如何变化。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!