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',
});