支付寶小程序擴(kuò)展能力 附錄 1：優(yōu)化 setData 邏輯方案明細(xì)

優(yōu)化 setData 邏輯

任何頁(yè)面變化都會(huì)觸發(fā) setData，同一時(shí)間可能會(huì)有多個(gè) setData 觸發(fā)頁(yè)面進(jìn)行重新渲染。如下四個(gè)接口都會(huì)觸發(fā) web-view 頁(yè)面重新渲染。

• Page.prototype.setData：觸發(fā)整個(gè)頁(yè)面做差異比較；
• Page.prototype.$spliceData：針對(duì)長(zhǎng)列表做優(yōu)化，避免每次傳遞整個(gè)列表，觸發(fā)整個(gè)頁(yè)面做差異比較；
• Component.prototype.setData：只會(huì)從對(duì)應(yīng)組件節(jié)點(diǎn)開始做差異比較；
• Component.prototype.$spliceData：針對(duì)長(zhǎng)列表做優(yōu)化，避免每次傳遞整個(gè)列表，只會(huì)從對(duì)應(yīng)組件節(jié)點(diǎn)開始做差異比較。

優(yōu)化建議

• 避免頻繁觸發(fā) setData 或者 $spliceData，不管是頁(yè)面級(jí)別還是組件級(jí)別。在我們分析的案例中，有些頁(yè)面有倒計(jì)時(shí)邏輯，但是有的倒計(jì)時(shí)過(guò)于頻繁觸發(fā)（ms 級(jí)別的觸發(fā)）；
• 需要頻繁觸發(fā)重新渲染時(shí)，避免使用頁(yè)面級(jí)別的 setData 和 $spliceData， 將這一塊封裝成自定義組件，然后使用組件級(jí)別的 setData 或 $spliceData 觸發(fā)組件重新渲染；
• 長(zhǎng)列表數(shù)據(jù)觸發(fā)渲染時(shí)，使用 $spliceData 多次追加數(shù)據(jù)，而不用傳遞整個(gè)列表；
• 復(fù)雜頁(yè)面建議封裝成自定義組件，減少頁(yè)面級(jí)別的 setData。

優(yōu)化案例

推薦指定路徑設(shè)置數(shù)據(jù)

this.setData({
  'array[0]': 1,
  'obj.x':2,
});

不推薦如下用法（雖然拷貝了this.data, 仍然直接更改了其屬性）

const array = this.data.array.concat();
array[0] = 1;
const obj={...this.data.obj};
obj.x=2;
this.setData({array,obj});

更不推薦直接更改 this.data（違反不可變數(shù)據(jù)原則）

this.data.array[0]=1;
this.data.obj.x=2;
this.setData(this.data)

長(zhǎng)列表使用 $spliceData

this.$spliceData({ 'a.b': [1, 0, 5, 6] })

注意

有時(shí)業(yè)務(wù)邏輯封裝到了組件中，當(dāng)組件 UI 需要重新渲染時(shí)，只需在組件內(nèi)部調(diào)用 setData。但有時(shí)需要從頁(yè)面觸發(fā)組件重新渲染，比如在頁(yè)面上監(jiān)聽了 onPageScroll 事件，當(dāng)事件觸發(fā)時(shí)，需要通知對(duì)應(yīng)組件重新渲染，此時(shí)的處理措施如下所示：

// pages/index/index.jsPage({
    onPageScroll(e) {
        if (this.xxcomponent) {
            this.xxcomponent.setData({
                scrollTop: e.scrollTop            })
        }
    }
})
// components/index/index.jsComponent({
    didMount(){
        this.$page.xxcomponent = this;
    }
})

可在組件的 didMount 中將組件掛載到對(duì)應(yīng)的頁(yè)面上，即可在頁(yè)面中調(diào)用組件級(jí)別的 setData 只觸發(fā)組件重新渲染。