为什么不能频繁 setData
先科普下 setData 做的事情：
在数据传输时，逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分，之后将数据发送给视图层。同时，逻辑层还会将 setData 所设置的数据字段与 data 合并，使开发者可以用 this.data 读取到变更后的数据。
因此频繁调用，视图会一直更新，阻塞用户交互，引发性能问题。
但频繁调用是常见开发场景，能不能频繁调用的同时，视图延迟更新呢？
参考 Vue，我们能知道，Vue 每次赋值操作并不会直接更新视图，而是缓存到一个数据更新队列中，异步更新，再触发渲染，此时多次赋值，也只会渲染一次。
于是有网友就给出了这套方案的实现方法：
let newState = null
const asyncSetData = ({
vm,
newData,
}) => {
newState = {
...newState,
...newData,
}
Promise.resolve().then(() => {
if (!newState) return
vm.setData({
...newState,
})
newState = null
})
}
由于异步代码会在同步代码之后执行，因此，当你多次使用 asyncSetData 设置 newState 时，newState 都会被缓存起来，并异步 setData 一次
但同时，这个方案也会带来一个新的问题，同步代码会阻塞页面的渲染。
同步代码会阻塞页面的渲染的问题其实在浏览器中也存在，但在小程序中，由于是逻辑、视图双线程架构，因此逻辑并不会阻塞视图渲染，这是小程序的优点，但在这套方案将会丢失这个优点。
鱼与熊掌不可兼得也！
对于信息流页面，数据过多怎么办
单次设置的数据不能超过 1024kB，请尽量避免一次设置过多的数据
通常，我们拉取到分页的数据 newList，添加到数组里，一般是这么写：
this.setData({
list: this.data.list.concat(newList)
})
随着分页次数的增加，list 会逐渐增大，当超过 1024 kb 时，程序会报 exceed max data size 错误。
为了避免这个问题，我们可以直接修改 list 的某项数据，而不是对整个 list 重新赋值：
let length = this.data.list.length;
let newData = newList.reduce((acc, v, i)=>{
acc[`list[${length+i}]`] = v;
return acc;
}, {});
this.setData(newData);
这看着似乎还有点繁琐，为了简化操作，我们可以把 list 的数据结构从一维数组改为二维数组：list = [newList, newList]， 每次分页，可以直接将整个 newList 赋值到 list 作为一个子数组，此时赋值方式为：
let length = this.data.list.length;
this.setData({
[`list[${length}]`]: newList
});
同时，模板也需要相应改成二重循环：
<block wx:for="{{list}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}">
<child wx:for="{{listItem}}" wx:key="{{item}}"></child>
</block>
下拉加载，让我们一夜回到解放前
信息流产品，总避免不了要做下拉加载。
下拉加载的数据，需要插到 list 的最前面，所以我们应该这样做：
this.setData({
'list[-1]': newList
})
哦不，对不起，上面是错的，应该是下面这样：
this.setData({
list: this.data.list.unshift(newList)
});
这下好，又是一次性修改整个数组，一夜回到解放前......
为了解决这个问题，这里需要一点奇淫巧技：
- 为下拉加载维护一个单独的二维数组 pullDownList
- 在渲染时，用 wxs 将 pullDownList reverse 一下
此时，当下拉加载时，便可以只修改数组的某个子项：
let length = this.data.pullDownList.length;
this.setData({
[`pullDownList[${length}]`]: newList
});
关键在于渲染时候的反向渲染：
<wxs module="utils">
function reverseArr(arr) {
console.log
return arr.reverse()
}
module.exports = {
reverseArr: reverseArr
}
</wxs>
<block wx:for="{{utils.reverseArr(pullDownList)}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}">
<child wx:for="{{listItem}}" wx:key="{{item}}"></child>
</block>
<block wx:for="{{list}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}">
<child wx:for="{{listItem}}" wx:key="{{item}}"></child>
</block>
问题解决！以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
小程序,setData
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。