react-native - 如何在 ListView 中添加/删除项目？

Question

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

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

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

Answer 1

是的，请调用 cloneWithRows(...)React Native 文档没有涵盖 ListViewDataSource对象，因此阅读 source code 中的评论会有所帮助看看这是如何工作的。
一些可能有用的注释:

cloneWithRows(data)命名有点误导，因为不只是创建数据的克隆，正如其名称所暗示的那样。

相反，它会尝试比较新的 data数据源中现有行(如果有)的行，并确定是否有要插入的新行，或需要替换或删除的现有行。

源代码注释说明数据源中的数据在设计上是不可变的，因此更改它的正确方法是指定更新的数据源，即调用 cloneWithRows(...) .

仅仅为了更改几行而传递整个列表可能看起来不直观，但有几个原因可以解释为什么它是有意义的:

首先，它符合 React 的整体 flux-based architecture其中的重点是设置状态并允许组件弄清楚如何改变自己以反射(reflect)新状态(想想 this.props 或 this.state 的工作原理)。您可以随意更改 ListView 之外的数据数组。组件，但是一旦您准备好更新组件，将整个状态传递给组件以便它可以自我更新是一种不错的通量方法。

其次，它的效率相当高。 ListView 在开始渲染过程之前在 Javascript 中进行大量的行区分，然后在渲染周期中一次渲染一行(您可以 adjust this )，以减少帧丢失。

第三，这里不排除支持像 .addRow(..) 这样的方法的可能性。在将来。关键是当前的实现并不是一个糟糕的开始，因为它提供了一个基于状态的接口(interface)，让开发人员不必担心列表组件如何在状态之间变化。