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

前端之家收集整理的这篇文章主要介绍了react-native – 如何添加/删除项目到ListView?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们可以像这样为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(..)方法的可能性。关键是当前的实现并不是一个糟糕的开始,因为它提供了一个基于状态的界面,允许开发人员不用担心列表组件在状态之间如何变化。

原文链接:https://www.f2er.com/react/301983.html

猜你在找的React相关文章