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

2019年6月1日 203次阅读

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

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

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

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

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

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

进行了下拉刷新,再看console

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

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

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

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

擦,数据明明只增多了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

本人的实践方式

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

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

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

点赞