React Native 之使用 immutable.js 提升 ListView性能

React Native的ListView是一个很常用的组件,它能很轻松的展示列表的数据,
并且可以方便的加入 下拉刷新与加载更多的功能.

但最新一次打印日志时发现, ListView在进行下拉刷新与加载更多时多了很多不必要的绘制.

看图-----
页面的ListView是这样的,每次获取6行数据

控制台是这样的,执行了6次render Item的操作

进行了下拉刷新,再看console

数据明明没有进行改变,但啥也不顾,就又多了6次 renderItem

再尝试 下载更多,console是这样的

擦,数据明明只增多了6个,却把没有改变的数据都重新render一遍.

到了这种时候,我们不能不尝试了做些什么了.还好,react 里面有一个方法,shouldComponentUpdate,该方法的作用就是判断 是否需要重新render.返回false则表示不需要重新render.

但这里我们又不能直接返回false,为啥,因为下拉刷新操作你数据有可能会变啊,永久返回false之后当你数据变了但不重新renderItem,这将是个BUG.

关键在于 对象比较, 只要子布局里面的 对象与从服务端拿到的对象 里面的值是相等的,才返回false,否则返回true.

Immutable.js 是一个 一旦创建则不可更改的数据,使用该库 能高效的比较对象里面的值 是否完全相等.

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

本人的实践方式

再使用了 Immutable.is 比较后,多余的renderItem真的没了,而且当下拉刷新时,某个对象改变了,只会有 对应的item进行render.

该方法适用于有下拉刷新与上拉加载的功能的ListView,因为重复多余的render 对于产品级应用 杀伤太可怕.