用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序 setData 为什么不能频繁设置

Rolan 2019-2-20 00:25

先科普下 setData 做的事情:在数据传输时,逻辑层会执行一次 JSON.stringify 来去除掉 setData 数据中不可传输的部分,之后将数据发送给视图层。同时,逻辑层还会将 setData 所设置的数据字段与 data 合并,使开发 ...

先科普下 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 的 newData 都会缓存在 newState 中,并在异步的 promise.then 中只 setData 一次。

但这个方案会带来新的问题:就是 同步代码会阻塞页面的渲染 。

同步代码会阻塞页面的渲染的问题其实在浏览器中也存在,但在小程序中,由于是逻辑、视图双线程架构,因此逻辑并不会阻塞视图渲染,这是小程序的优点,但在这套方案将会丢失这个优点。

鱼与熊掌不可兼得也!

参考资料

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: henry_chen 来自: segmentfault