React Native的ListView是一個很常用的組件,它能很輕松的展示列表的數(shù)據(jù),
并且可以方便的加入 下拉刷新與加載更多的功能.

但最新一次打印日志時發(fā)現(xiàn), ListView在進(jìn)行下拉刷新與加載更多時多了很多不必要的繪制.

看圖-----
頁面的ListView是這樣的,每次獲取6行數(shù)據(jù)

控制臺是這樣的,執(zhí)行了6次render Item的操作

進(jìn)行了下拉刷新,再看console

數(shù)據(jù)明明沒有進(jìn)行改變,但啥也不顧,就又多了6次 renderItem

再嘗試 下載更多,console是這樣的

擦,數(shù)據(jù)明明只增多了6個,卻把沒有改變的數(shù)據(jù)都重新render一遍.

到了這種時候,我們不能不嘗試了做些什么了.還好,react 里面有一個方法,shouldComponentUpdate,該方法的作用就是判斷 是否需要重新render.返回false則表示不需要重新render.

但這里我們又不能直接返回false,為啥,因?yàn)橄吕⑿虏僮髂銛?shù)據(jù)有可能會變啊,永久返回false之后當(dāng)你數(shù)據(jù)變了但不重新renderItem,這將是個BUG.

關(guān)鍵在于 對象比較, 只要子布局里面的 對象與從服務(wù)端拿到的對象 里面的值是相等的,才返回false,否則返回true.

Immutable.js 是一個 一旦創(chuàng)建則不可更改的數(shù)據(jù),使用該庫 能高效的比較對象里面的值 是否完全相等.

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真的沒了,而且當(dāng)下拉刷新時,某個對象改變了,只會有 對應(yīng)的item進(jìn)行render.

該方法適用于有下拉刷新與上拉加載的功能的ListView,因?yàn)橹貜?fù)多余的render 對于產(chǎn)品級應(yīng)用 殺傷太可怕.