網(wǎng)站建設(shè)人員配置是怎樣的,wordpress圖片自動(dòng)水印,熱搜榜百度一下你就知道,開(kāi)發(fā)公司工程項(xiàng)目管理總結(jié)經(jīng)驗(yàn)教訓(xùn)在上一篇《HarmonyOS 教學(xué)實(shí)戰(zhàn)#xff08;二#xff09;》中#xff0c;我們已經(jīng)讓?xiě)?yīng)用具備了#xff1a;網(wǎng)絡(luò)請(qǐng)求本地緩存離線(xiàn)兜底完整 Store 設(shè)計(jì)但只要你的數(shù)據(jù)一多#xff0c;列表就一定是性能重災(zāi)區(qū)。真實(shí)項(xiàng)目中#xff0c;80% 的卡頓都來(lái)自#xff1a;? 列表一次…在上一篇《HarmonyOS 教學(xué)實(shí)戰(zhàn)二》中我們已經(jīng)讓?xiě)?yīng)用具備了網(wǎng)絡(luò)請(qǐng)求本地緩存離線(xiàn)兜底完整 Store 設(shè)計(jì)但只要你的數(shù)據(jù)一多列表就一定是性能重災(zāi)區(qū)。真實(shí)項(xiàng)目中80% 的卡頓都來(lái)自? 列表一次性加載? 下拉刷新邏輯混亂? 滾動(dòng)時(shí)頻繁重建組件這一篇我們專(zhuān)門(mén)解決這些問(wèn)題。一、這一篇我們要解決哪些真實(shí)痛點(diǎn)圍繞一個(gè)真實(shí)列表頁(yè)面完成 3 件事 列表分頁(yè)加載上拉加載更多 下拉刷新重新請(qǐng)求第一頁(yè) 列表性能優(yōu)化可復(fù)用組件 狀態(tài)收斂完成后你的列表會(huì)具備數(shù)據(jù)多也不卡、刷新快、滾動(dòng)順二、先改接口支持分頁(yè)返回假設(shè)后端接口升級(jí)為GET /api/tasks?page1pageSize10返回格式{ list: [ { id: 101, title: 學(xué)習(xí) HarmonyOS } ], hasMore: true }三、第一步升級(jí)網(wǎng)絡(luò) Service分頁(yè)支持修改service/TaskService.etsexport interface PageResultT { list: T[] hasMore: boolean } export class TaskService { static async fetchTasks( page: number, pageSize: number ): PromisePageResultTask { const httpRequest http.createHttp() const response await httpRequest.request( https://example.com/api/tasks?page${page}pageSize${pageSize}, { method: http.RequestMethod.GET } ) const data JSON.parse(response.result as string) return { list: data.list.map(item new Task(item.id, item.title)), hasMore: data.hasMore } } }四、第二步升級(jí) Store分頁(yè)核心邏輯分頁(yè)的核心邏輯必須放在 Store而不是 UI。修改model/TaskModel.etsObservedV2 export class TaskStore { tasks: Task[] [] page: number 1 pageSize: number 10 hasMore: boolean true loading: boolean false refreshing: boolean false async refresh() { if (this.refreshing) return this.refreshing true this.page 1 const result await TaskService.fetchTasks(this.page, this.pageSize) this.tasks result.list this.hasMore result.hasMore this.refreshing false } async loadMore() { if (!this.hasMore || this.loading) return this.loading true this.page const result await TaskService.fetchTasks(this.page, this.pageSize) this.tasks this.tasks.concat(result.list) this.hasMore result.hasMore this.loading false } }教學(xué)重點(diǎn)refresh()只管第一頁(yè)loadMore()只管追加UI 只需要調(diào)用不參與邏輯判斷五、第三步頁(yè)面中接入下拉刷新 上拉加載修改pages/Index.etsComponentV2 struct Index { Local store new TaskStore() Once async init() { await this.store.refresh() } build() { Column() { Refresh({ refreshing: this.store.refreshing }) { List() { ForEach(this.store.tasks, (item: Task) { TaskItem({ task: item, onDelete: () {} }) }, item item.id.toString()) if (this.store.hasMore) { ListItem() { Text(this.store.loading ? 加載中... : 上拉加載更多) .onAppear(() this.store.loadMore()) } } } } } } }onAppear是分頁(yè)加載的關(guān)鍵 不需要監(jiān)聽(tīng)滾動(dòng)位置 非常穩(wěn)定六、第四步列表性能優(yōu)化重點(diǎn)1?? 使用 ReusableV2 優(yōu)化列表項(xiàng)ReusableV2 ComponentV2 export struct TaskItem { Param task: Task Event onDelete: (id: number) void build() { Row() { Text(this.task.title) Button(刪除) .onClick(() this.onDelete(this.task.id)) } } } ArkUI 會(huì)自動(dòng)復(fù)用組件結(jié)構(gòu) 滾動(dòng)時(shí)不會(huì)頻繁銷(xiāo)毀/重建2?? 避免 ListItem 中使用 Local 狀態(tài)? 錯(cuò)誤示例Local checked false會(huì)導(dǎo)致每個(gè) Item 都維護(hù)自己的狀態(tài)極易卡頓。? 正確做法狀態(tài)上移到 Store 或 Model3?? 控制刷新粒度狀態(tài)收斂避免這樣的寫(xiě)法Local store new TaskStore() // 整個(gè) store 變 → 全列表刷新更優(yōu)方式是列表只依賴(lài)tasksloading 狀態(tài)放在 footer七、第五步緩存 分頁(yè)怎么配合推薦策略場(chǎng)景行為首次進(jìn)入讀緩存 → 再 refresh下拉刷新丟棄緩存上拉加載不寫(xiě)緩存退出頁(yè)面保存當(dāng)前列表 不要每一頁(yè)都緩存 緩存的是“可用數(shù)據(jù)”不是“中間態(tài)”八、常見(jiàn)分頁(yè)性能坑必看? 坑 1List Column 嵌套會(huì)導(dǎo)致全部子項(xiàng)提前創(chuàng)建? 用 List ListItem? 坑 2key 不穩(wěn)定key index // 非常危險(xiǎn)? 使用業(yè)務(wù) id? 坑 3刷新 加載同時(shí)進(jìn)行? Store 中用標(biāo)志位嚴(yán)格限制九、現(xiàn)在你的 App 已經(jīng)是“工業(yè)級(jí)列表”了你已經(jīng)具備? 分頁(yè)加載? 下拉刷新? 狀態(tài)隔離? 高性能列表? 可擴(kuò)展 Store 結(jié)構(gòu)這已經(jīng)是90% 商業(yè) App 列表的實(shí)現(xiàn)水平。