11
04月
2020
分页列表数据对setData的优化
正常分页数据格式
let list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; // 分页数据追加 list.concat([10, 11, 12, 13, 14, 15, 16, 17, 18, 19]); // 再全量更新一次 this.setData({ list, });
优化方案
let list = [[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]]; // 分页数据追加 // page 为分页数 let page = 1; this.setData({ [`list[${page}]`]: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19], });
这样优化,就能将每次更新数据降到最低,加快setData更新效率,同时还能避免1024k的大小限制。这里将分页数据按照二维数组拆分后,还能将原来的列表单项组件,重新优化,封装成列表分页组件分页。
setData的其他使用优化
场景1:更新对象中的某个节点值
let user = { age: 20, nickName: 'CQQ', address: { name: '福建省福州市', code: '350000', }, }; this.setData({ user, }); // 修改address下的name 和 code this.setData({ [`user.address.name`]: '福建省厦门市', [`user.address.code`]: '361000', });
场景2:更新列表中指定索引上的值
let list = [1, 2, 3, 4]; let users = [{ user: { age: 20, name: 'CQQ', }, },{ user: { age: 50, name: 'YAA', }, },{ user: { age: 60, name: 'NDK', }, }]; this.setData({ list, users, }); // 修改list index= 3的值 let index = 3; this.setData({ [`list[${index}]`]: 40, }); // 修改users index = 1 的age值 index = 1; this.setData({ [`users[${index}].age`]: 40, }); // 修改users index = 2 的age和name index = 2; this.setData({ [`users[${index}]`]: { age: 10, name: 'KPP', }, }); // 或者 this.setData({ [`users[${index}].age`]: 10, [`users[${index}].name`]: 'KPP', });