React Native的ListView是一個(gè)很常用的組件,它能很輕松的展示列表的數(shù)據(jù),
并且可以方便的加入 下拉刷新與加載更多的功能.
但最新一次打印日志時(shí)發(fā)現(xiàn), ListView在進(jìn)行下拉刷新與加載更多時(shí)多了很多不必要的繪制.
看圖-----
頁(yè)面的ListView是這樣的,每次獲取6行數(shù)據(jù)
控制臺(tái)是這樣的,執(zhí)行了6次render Item的操作
進(jìn)行了下拉刷新,再看console
數(shù)據(jù)明明沒(méi)有進(jìn)行改變,但啥也不顧,就又多了6次 renderItem
再嘗試 下載更多,console是這樣的
擦,數(shù)據(jù)明明只增多了6個(gè),卻把沒(méi)有改變的數(shù)據(jù)都重新render一遍.
到了這種時(shí)候,我們不能不嘗試了做些什么了.還好,react 里面有一個(gè)方法,shouldComponentUpdate,該方法的作用就是判斷 是否需要重新render.返回false則表示不需要重新render.
但這里我們又不能直接返回false,為啥,因?yàn)橄吕⑿虏僮髂銛?shù)據(jù)有可能會(huì)變啊,永久返回false之后當(dāng)你數(shù)據(jù)變了但不重新renderItem,這將是個(gè)BUG.
關(guān)鍵在于 對(duì)象比較, 只要子布局里面的 對(duì)象與從服務(wù)端拿到的對(duì)象 里面的值是相等的,才返回false,否則返回true.
Immutable.js 是一個(gè) 一旦創(chuàng)建則不可更改的數(shù)據(jù),使用該庫(kù) 能高效的比較對(duì)象里面的值 是否完全相等.
Immutable 深入比較示例方法
'use strict';
var Immutable = require('immutable');
let abc=Immutable.Map.of("item",[{'xx':'xx'},{'bb':'ccc'}]);
let bcd=Immutable.Map.of("item",[{'xx':'xx'},{'bb':'ccc'}]);
console.log(Immutable.is()); //true
let map1 = Immutable.Map({a:1, b:1, c:1});
let map2 = Immutable.Map({a:1, b:1, c:2});
console.log(Immutable.is(map1, map2)); // false
本人的實(shí)踐方式
再使用了 Immutable.is 比較后,多余的renderItem真的沒(méi)了,而且當(dāng)下拉刷新時(shí),某個(gè)對(duì)象改變了,只會(huì)有 對(duì)應(yīng)的item進(jìn)行render.
該方法適用于有下拉刷新與上拉加載的功能的ListView,因?yàn)橹貜?fù)多余的render 對(duì)于產(chǎn)品級(jí)應(yīng)用 殺傷太可怕.
