如何在 ListView 中添加/删除项目? [英] How to add/Delete item into ListView?

问题描述

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

We can create a datasource for ListView like this

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

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

But if I want to add items or delete items from datasource, how can I do that? Do I need to always call cloneWithRows with updated array?

推荐答案

是的，调用 cloneWithRows(...)

React Native 文档未涵盖 ListViewDataSource 对象，因此阅读 源代码 看看它是如何工作的.

Yes, call cloneWithRows(...)

The React Native documentation doesn't cover the ListViewDataSource object, so it can be helpful to read the comments in the source code to see how this works.

一些可能有用的注释:

• cloneWithRows(data) 的命名有点误导，因为它不仅仅是创建数据的克隆，顾名思义.

• cloneWithRows(data) is a bit misleadingly named because doesn't just create a clone of the data as the name suggests.

相反，它尝试将新的 data 行与数据源中的现有行(如果有)进行比较，并确定是否有新行要插入，或者现有行需要更换或移除.

Instead, it tries to compare the new data rows with the existing rows (if any) in the dataSource, and figures out whether there are new rows to insert, or existing rows that need to be replaced or removed.

源码注释说明数据源中的数据是设计不可变的，所以正确的修改方式是指定一个更新的数据源，即调用cloneWithRows(...).

The source code comments note that the data in the data source is immutable by design, so the correct way to change it is to specify an updated data source, i.e. call cloneWithRows(...).

为了改变几行而传递整个列表似乎不直观，但有几个原因可以解释为什么它有意义:

It may seem unintuitive to pass the entire list just to change a few rows, but there are a couple reasons for why it makes sense:

• 首先，它符合 React 的整体基于flux的架构重点是设置状态并允许组件弄清楚如何改变自己以反映新状态(想想 this.props 或 this.state 是如何工作的).您可以在 ListView 组件之外随意更改数据数组，但是一旦您准备好更新组件，将整个状态传递到组件中以便它可以更新是一种不错的通量方法自己.

• First, it comports with React's overall flux-based architecture where the focus is on setting states and allowing components to figure out how to mutate themselves to reflect the new state (think of how this.props or this.state works). You are free to change the data array however you like outside the ListView component, but once you are ready to update the component, it's a decent flux approach to pass the entire state into the component so it can update itself.

其次，它相当高效.ListView 在 Javascript 中在开始渲染过程之前进行重行区分，然后一次渲染一行(您可以 在渲染周期中对此进行调整)，以减少掉帧.

Second, it's decently efficient. The ListView does the heavy row differentiation in the Javascript before it starts the rendering process, and then renders one row at a time (you can adjust this) during the rendering cycle, to reduce frame drops.

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

Third, nothing here precludes the possibility of supporting methods like .addRow(..) in the future. The point is that the current implementation isn't a bad start, because it provides a state-based interface that allows developers not to worry about how the list component mutates between states.

这篇关于如何在 ListView 中添加/删除项目?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！