十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这是一篇关于LIstView实现动态数据渲染的文章!
成都创新互联自2013年起,先为塔什库尔干塔吉克等服务建站,塔什库尔干塔吉克等地企业,进行企业商务咨询服务。为塔什库尔干塔吉克企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案
前提比如我们数据是100条+
第一:一次性把100条数据fetch过来 然后由前端JS代码来做分页处理(如每次渲染10条)
第二:在server端做处理通过?page=n的方式 每次需要第几页数据就fetch第几页的数据
利弊
第一种方案的优点是 一次性把数据全部载入完成 如果数据量很大的情况下可能会有很长的loading时间 但是对于服务端的压力就会减少请求次数
第二种方案的优点是 分批载入数据 数据量相对小 对于初始化的时候载入时间很快 缺点也很明显 (如100条数据 每次显示10 那么就需要访问10此服务器 增加请求次数)
其实这两种都是不错的方案 具体用什么方案来处理数据 根据自己的项目和需求来决定
本例子中 因为数据不是很多 我们就用第一种方案吧
我们拿上一篇的例子来做改动吧
constructor(props) { super(props); this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource:this.ds, } this.listData = null; //数据源 this.len = null; //数据的个数 this.count = null; //当前数据总页数 this.pageSize = 10; //每次渲染的个数 this.page = 0; //当前页数 }