小程序setData数据量过大时候会对渲染有影响吗？

datas:[
 {
 id:1000,
 name: "帅哥"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 {
 id:1001,
 name: "美女"，
 title: '...',
 b: '...',
 d: 0,
 f:0,
 ....
 },
 ...
]

如上：后台返回数据中有可能包含了大量的无用数据，数据量如果过大时候会对小程序渲染界面有影响吗？

答案是：有

一般情况下我们是在wxml中循环data，然后取出我们需要的字段，其他数据和我们无关。但是小程序文档中有这么一段话：

setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。在介绍常见的错误用法前，先简单介绍一下 setData 背后的工作原理。

工作原理

小程序的视图层目前使用 WebView 作为渲染载体，而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上，WebView 和 JavascriptCore 都是独立的模块，并不具备数据直接共享的通道。当前，视图层和逻辑层的数据传输，实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据，需要将其转换为字符串形式传递，同时把转换后的数据内容拼接成一份 JS 脚本，再通过执行 JS 脚本的形式传递到两边独立环境。

而 evaluateJavascript 的执行会受很多方面的影响，数据到达视图层并不是实时的。

其实就是我们setData里面的所有数据都被转成了字符串，然后字符串又转换成JS脚本，然后页面根据JS脚本去渲染页面。那么我们能做的就是尽量少传数据，而此时后台返回这一大串数据就与此相悖了，所以最好是新建一个tempData,将要的数据取出来之后再setDta这个tempData，以此来提高微信小程序的页面渲染速度，提升微信小程序运行效率，优化微信小程序的用户体验。

可以这样写：

let tempData = []
for(let i = 0; i < datas.length; i++) {
    let tempObj = {
        id: datas[i].id,
　　　   name: datas[i].name
    }
    tempData.push(tempObj)
}
console.log(tempData)

也可以使用高阶函数map：

let tempDatas = datas.map(data => {
    return {
        id: data.id,
        name: data.name 
    } 
})
console.log(tempDatas)

此时我们再使用setData({})就能提高渲染效率了

同时再分享两个setData技巧

1、有一个Object如下：

obj: {
    a: "a",
    b: "b",
    c: "c"
}

此时已经渲染到页面了，然后我们修改了obj,此时可以选择：

① 平时做法：

let obj = this.data.obj
obj.b = "我是后来修改的"
this.setData({
    obj: obj
})

② 但是更优化的做法是

this.setData({
    'obj.b': "我是后来修改的"
})

不仅省了两行代码，同时还提高页面渲染效率

2、和 1 差不多，就是Object变成数组Array，当我们要给数组的其中一个数据进行修改时，我们可以参照上面的方法

this.setData({
    'array[1]': "我是后来修改的"
})

当我们要给数组的多个数据进行修改时，我们会写一个循环，然后修改array,此时是无法识别的,要写成如下形式

for(let i = 0; i < 5; i++) { 
    this.setData({
        [`array[${i}]`]: "我是后来修改的" 
    })
}

 原文地址：https://blog.csdn.net/rolan1993/article/details/81738613