Why can't you setData frequently
Let’s take a look at what setData does:
During data transmission, the logical layer will execute once to remove the untransmitted parts of the setData data, and then send the data to the view layer. At the same time, the logic layer will also merge the data fields set by setData with data, so that developers can use to read the changed data.
Therefore, frequent calls will keep updating the view, blocking user interaction and causing performance problems.
However, frequent calls are a common development scenario. Can the view be updated delayed while calling frequently?
Referring to Vue, we can know that each assignment operation of Vue will not directly update the view, but will be cached into a data update queue, update asynchronously, and then trigger rendering. At this time, multiple assignments will only be rendered once.
So some netizens gave the implementation method of this solution:
let newState = null
const asyncSetData = ({
vm,
newData,
}) => {
newState = {
...newState,
...newData,
}
().then(() => {
if (!newState) return
({
...newState,
})
newState = null
})
}
Since the asynchronous code is executed after synchronous code, when you set newState using asyncSetData multiple times, newState will be cached and asynchronous setData will be once
But at the same time, this solution will also bring about a new problem, synchronous code blocking the rendering of the page.
The problem of synchronous code blocking page rendering actually exists in the browser, but in mini programs, since it is a dual-threaded architecture of logic and view, logic will not block view rendering. This is the advantage of mini programs, but this advantage will be lost in this solution.
You cannot have both fish and bear's paw!
What to do if there is too much data on the information flow page
The data set in a single time cannot exceed 1024kB. Please try to avoid setting too much data at once.
Usually, we pull the paged data newList and add it to the array, which is usually written like this:
({
list: (newList)
})
As the number of paging increases, the list will gradually increase. When it exceeds 1024 kb, the program will report an error of exceeding max data size.
To avoid this problem, we can directly modify a certain data of the list instead of reassigning the entire list:
let length = ;
let newData = ((acc, v, i)=>{
acc[`list[${length+i}]`] = v;
return acc;
}, {});
(newData);
This seems a bit cumbersome. In order to simplify operations, we can change the data structure of list from a one-dimensional array to a two-dimensional array: list = [newList, newList]. Every time we paging, we can directly assign the entire newList to list as a subarray. At this time, the assignment method is:
let length = ;
({
[`list[${length}]`]: newList
});
At the same time, the template also needs to be changed to a double loop accordingly:
<block wx:for="{{list}}" wx:for-item="{{listItem}}" wx:key="{{listItem}}">
<child wx:for="{{listItem}}" wx:key="{{item}}"></child>
</block>
Pull down to load
Information flow products are always inevitable to do pull-down loading.
The data loaded by the drop-down needs to be at the front of the list, so we should do this:
({
'list[-1]': newList
})
Oh no, sorry, the above is wrong, it should be like this:
({
list: (newList)
});
- Maintain a separate 2D array pullDownList for pulldown loading
- When rendering, use wxs to reverse pullDownList
At this time, when the pull-down loads, you can only modify a certain child item of the array:
let length = ;
({
[`pullDownList[${length}]`]: newList
});
The key is the reverse rendering during rendering:
<wxs module="utils">
function reverseArr(arr) {
return ()
}
= {
reverseArr: reverseArr
}
</wxs>
<block wx:for="{{(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>Problem solved! The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.