3 回答

TA貢獻(xiàn)1841條經(jīng)驗 獲得超3個贊
lonic的collectionRepeat指令和類似的其他實現(xiàn)方法體現(xiàn)了最熱且可以說是最具擴(kuò)展性的方法來克服大型數(shù)據(jù)集的這些挑戰(zhàn)。一個比較好的術(shù)語是“遮擋剔除”,但您可以將其總結(jié)為:不要僅僅將呈現(xiàn)的DOM元素的數(shù)量限制為任意(但仍然很高)的分頁數(shù),例如50、100、500 ... ,只能將其限制為用戶可以看到的盡可能多的元素。
如果執(zhí)行類似“無限滾動”的操作,則可以減少初始 DOM計數(shù),但是經(jīng)過幾次刷新后它會很快膨脹,因為所有這些新元素都位于底部。滾動成為爬網(wǎng),因為滾動全部與元素計數(shù)有關(guān)。沒有什么是無限的。
而collectionRepeat方法是僅使用視口中適合的盡可能多的元素,然后對其進(jìn)行回收。當(dāng)一個元素旋轉(zhuǎn)到視圖外時,它會與渲染樹分離,重新填充列表中新項目的數(shù)據(jù),然后重新附加到列表另一端的渲染樹。這是人類已知的最快方法,它利用有限的現(xiàn)有元素集來獲取和接收DOM中的新信息,而不是傳統(tǒng)的創(chuàng)建/銷毀...創(chuàng)建/銷毀周期。使用這種方法,您可以真正實現(xiàn)無限滾動。
請注意,您不必使用Ionic即可使用/ hack / adapt collectionRepeat或類似的任何其他工具。這就是為什么他們稱其為開源。:-)(也就是說,Ionic團(tuán)隊正在做一些非常巧妙的事情,值得您注意。)
至少有一個出色的示例,可以在React中完成非常類似的操作。您只是選擇不對樹中未顯示的任何內(nèi)容進(jìn)行渲染,而不是對具有更新內(nèi)容的元素進(jìn)行回收。盡管它們非常簡單的POC實施允許一些閃爍,但它可以快速處理5000個項目。
另外... track by即使在數(shù)據(jù)集較小的情況下,使用它也會非常有用,以回應(yīng)其他一些帖子。認(rèn)為它是強(qiáng)制性的。
添加回答
舉報