前言
在开发过程中最常见的任务就是建立一个列表,无论是联系人列表或是商品目录等等。为了提高开发效率,这里我们将对ListView进行整理和封装,使得其使用变得方便快捷。
为了检验组件的可用性,我们将开发下图的示例。该程序包含一个列表,可在程序初始化后现实一个数组中的数据。在点击Add Item
按键后,列表将会添加新的项目。
这里要注意的是,ListView的部分应进行适当的封装,使得同样的组建可以快速的用于联系人列表或购物清单等场景。
想象驱动开发 (Wish-driven Development)
和测试驱动开发类似,想象驱动开发指的是先想象你的代码开发完成后应该如何使用,然后再进行开发,直到代码能够实现你描述的功能。
我想只需要写X我的代码就能做到Y => 一直修改代码直至实现你的愿望
在这个例子中我们希望ListView可以这样使用:
// 代码仅用于展示概念,放到程序里运行不了不要找我
<MyListView data={
this.state.data} row={<Row />} />
为了实现代码的高重用性,我们希望列表中的每一行的外观都由组建<Row />
决定,方便随时调整,然后作为一个props
传到组件中,同时我们还不希望对于数据进行管理,而仅仅传入一个数组,ListView就可以自动将数据分发给每个<Row />
组件。而数组发生变更的时候,MyListView
也应该自动更新。
处理dataSource和数据刷新
ListView
的数据来自于dataSource,这个参数必须是一个ListView.DataSource
对象。所以我们采用了这样的方法定义dataSource:
首先,定义一个MyListView
类用来封装ListView: