위챗 애플릿 백엔드에서 대량의 여분의 데이터 처리를 되돌려줍니다

데스크톱 인터페이스는 하나의 수조로 되돌아간다. 수조 안의 N은 여러 개의 대상이 있고 각 대상 안의 수십 수백 개의 데이터가 있다. 가장 재미있는 것은 내가 각 대상 안의 어떤 두 개의 데이터,,,,
 
다음과 같습니다.

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

 
사실 나는 id와name만 있으면 백그라운드를 찾아서 해결하고, 그만두어라. 어찌하면 선비로서 온화하고 우아한지, 싸움은 이길 수 없으니, 이길 수 있는 사람은 바로 때려라. 때리고 고치라고!
데이터가 너무 많으면 네트워크 요청에 큰 영향을 줍니까?솔직히 크지도 않고 몇 조 원짜리 사진도 아닌데 데이터를 되돌리는 속도가 어차피 나는 지연을 느끼지 못한다.
그러나 데이터 양이 너무 많으면 애플릿 렌더링 인터페이스에 영향을 줍니까?
답은:있다!일반적인 상황에서 우리는 wxml에서 데이터를 순환한 다음item을 꺼냅니다.id 및 item.name, 다른 데이터는 우리와 무관해 보이지만, 공식 문서인 setData 관련 정보를 볼 때 다음과 같은 단락이 있습니다
setData는 애플릿 개발에서 가장 자주 사용되는 인터페이스이자 성능 문제를 일으키기 쉬운 인터페이스이다.흔히 볼 수 있는 오류 사용법을 소개하기 전에 setData 배후의 작업 원리를 간단하게 소개하겠습니다.
작업 원리
애플릿의 뷰 레이어는 현재 WebView를 렌더링 캐리어로 사용하고 있으며 논리 레이어는 독립된 Javascript Core를 실행 환경으로 사용합니다.구조상 WebView와 Javascript Core는 모두 독립된 모듈로 데이터가 직접 공유되는 채널을 갖추지 못한다.현재 보기 층과 논리 층의 데이터 전송은 실제적으로 양쪽에서 제공하는evaluate Javascript를 통해 이루어진다.즉, 사용자가 전송한 데이터는 문자열 형식으로 변환하여 전달하는 동시에 변환된 데이터 내용을 하나의 JS 스크립트로 연결하여 JS 스크립트를 실행하는 형식으로 양쪽의 독립된 환경에 전달해야 한다.
한편, evaluate Javascript의 실행은 여러 가지 측면의 영향을 받아 데이터가 시각층에 도착하는 것은 실시간이 아니다.
사실은 우리 setData의 모든 데이터가 문자열로 바뀌었고, 문자열 우편요금은 JS 스크립트로 바뀌었고, 페이지는 JS 스크립트에 따라 페이지를 렌더링했다.그러면 우리가 할 수 있는 일은 데이터를 최대한 적게 전송하는 것이다. 이때 백엔드에서 이 일련의 데이터를 되돌려주는 것은 이와 어긋난다. 그러므로 가장 좋은 것은 새로운tempData를 만들고 필요한 데이터를 꺼낸 다음에 setDta라는tempData를 만들어서 위챗 애플릿의 페이지 렌더링 속도를 향상시키고 위챗 애플릿의 운영 효율을 향상시키며 위챗 애플릿의 사용자 체험을 최적화시키는 것이다.
우리는 이렇게 쓸 수 있다.

[mw_shl_code=applescript,true] var tempData = []
for(var i = 0; i < datas.length; i++) {
var tempObj = {}
tempObj.id = datas[i].id
tempObj.name = datas[i].name
tempData.push(tempObj)
}
console.log(tempData)
[/mw_shl_code]

또는 고급 함수 맵()을 사용합니다.

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

setData({})를 사용하면 렌더링 효율이 향상됩니다.
setData 팁 두 가지 추가
1. 다음과 같은 Object가 있습니다.
 

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

페이지가 렌더링되고 obj가 수정되었으므로 다음을 선택할 수 있습니다.
1) 평소 방법

let obj = this.data.objobj.b = " "this.setData({ obj: obj})

 
2) 더 최적화된 방법은

this.setData({ 'obj.b': " "})

두 줄의 코드를 절약할 뿐만 아니라 페이지의 렌더링 효율도 향상시킨다. 2. 사실과 1의 차이는 많지 않다. 바로 Object가 수조로 변하는 Array이다. 우리가 수조의 데이터 중 하나를 수정할 때 우리는 위의 방법을 참조할 수 있다.

this.setData({ 'array[1]': " "})

우리가 수조의 여러 데이터를 수정하려고 할 때, 우리는 순환을 한 다음에 array를 수정합니다. 이 때는 식별할 수 없습니다. 다음과 같은 형식으로 써야 합니다

for(var i = 0;i < 5;i++) { 
 this.setData({ [`array[${i}]`]:" " 
}) }

어린 친구들은 또 다른 위챗 애플릿 setData에 관한 다른 지식이 있습니다. 댓글을 환영합니다. 그리고 위에 있는 저것을 위해 왜 []를 추가해야 하는지 알고 있습니다. 많은 가르침을 바랍니다!
 

칼럼니스트

위현.애플릿 커뮤니티 블로거.애플릿 개발 실전을 공유하고 오리지널을 견지한다.
이 글은 애플릿 커뮤니티에서 원작으로 발표되었다.허가 없이 원문 주소 전재 금지: 위챗 애플릿 백엔드에서 대량의 여분의 데이터를 반환하는 처리-애플릿 커뮤니티/블로거 전문 구역-위챗 애플릿 개발 커뮤니티-위챗 애플릿 연맹
 

관련 기사

위챗 애플릿이 wxs 계산으로 얻은 데이터
위챗 애플릿 JSON 데이터 전송 애플릿 페이지 효과 - 슬라이딩 화면 로드 데이터