相信大家對(duì)這種選擇城市列表都不陌生艰山，這次的性能瓶頸出現(xiàn)在當(dāng)這個(gè)城市列表數(shù)據(jù)量較大涣仿，達(dá)到1000+時(shí)酬姆，通過(guò)拖動(dòng)右側(cè)的字母定位嗜桌，對(duì) ScrollView 進(jìn)行快速的錨點(diǎn)定位，同時(shí)字母定位高亮?xí)r辞色，就會(huì)出現(xiàn)卡頓的情況骨宠。
在使用微信小程序原生開(kāi)發(fā)時(shí)，未出現(xiàn)這個(gè)性能問(wèn)題相满。但是用 Taro 重寫(xiě)時(shí)层亿，代碼邏輯一模一樣，并且對(duì) react rerender 進(jìn)行精準(zhǔn)控制后立美，依然會(huì)有卡頓匿又。
最后的解決方案比較尷尬，在小程序端干掉了吸頂定位和側(cè)邊欄字母的高亮展示悯辙，簡(jiǎn)單說(shuō)就是在拖動(dòng)字母錨點(diǎn)定位列表時(shí)琳省，沒(méi)有任何的 setState 操作，組件之間的通信都通過(guò) ref 進(jìn)行調(diào)用躲撰，這樣才能保證 ScrollView 滾動(dòng)時(shí)不出現(xiàn)卡頓情況针贬。當(dāng)然這種卡頓只有當(dāng)列表項(xiàng)較多的情況才會(huì)出現(xiàn)，親測(cè)列表項(xiàng)在300-400條數(shù)據(jù)時(shí)拢蛋，有 setState 操作對(duì)滾動(dòng)的影響還是比較小的桦他，也沒(méi)有明顯的卡頓。
所以最后要如何實(shí)現(xiàn)還是要看具體的業(yè)務(wù)場(chǎng)景了~
