Applet setData data overload time will render the affect it?

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

Above: return data in the background it may contain a large amount of useless data, the amount of data is too large when the applet will render the interface affect it?

The answer is: there

Normally we are in wxml cycle data, and then we need to remove the field, and other data unrelated to us. But there is a small program documentation in so many words:

setData is a small program to develop the most frequently used interface, it is most likely to lead to performance problems interfaces. Before introducing common mistakes usage, briefly explain the working principle behind the setData.

working principle

View layer applet as rendered WebView currently used carrier, and the logical layer is made as an independent JavascriptCore operating environment. In the framework, and the WebView JavascriptCore are independent modules, it does not have the shared data channel directly. Currently, the view layer and layer data transfer logic, in fact, achieved by evaluateJavascript provided on both sides. I.e., the user data transmission, transmission needs to be converted to a string, and the converted content data together into a JS script, and then passed to the environment on both sides in the form of an independent execution of the JS script.

The execution evaluateJavascript can be affected by many aspects, not the view layer data arrives in real time.

In fact, all the data we setData which have been turned into a string, the string and then converted into a JS script, and then the page to render pages according to JS script. So we can do is minimize the transmission of data, at a time when returns this long list of background data on the contrary to this, so it is best then setDta this tempData after a new tempData, the data will be taken out in order to improve the micro-letter page rendering speed applet, applet micro-channel upgrade operational efficiency, optimize the user experience micro-channel applet.

It can be written:

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)

You can also use higher-order functions map:

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

At this time, we'll use the setData ({}) can improve the rendering efficiency

At the same time again to share two tips setData

1, there is an Object is as follows:

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

At this point has been rendered to the page, and then we modify the obj, then you can choose:

① usual practice:

obj = the let the this .data.obj 
obj.b = "I was later modified"
 the this .setData ({ 
    obj: obj 
})

② But a more optimal approach is

the this .setData ({
     'obj.b': "I was later modified" 
})

Not only saving two lines of code, but also improve page rendering efficiency

2, and a similar array into the Array Object is, when one of the data array can be modified to give us, we can refer to the above method of

the this .setData ({
     'Array [. 1]': "I was later modified" 
})

When we give an array of a plurality of data to be modified, we will write a loop, and then modify the array, and this was not recognized, to be written in the form

for (the let I = 0; I <. 5; I ++ ) { 
     the this .setData ({ 
        [ `Array [ $ {I} ]`]: "I was later modified"  
    }) 
}

Original Address: https://blog.csdn.net/rolan1993/article/details/81738613

Applet setData data overload time will render the affect it?

Guess you like