# react-native-nlist
react-nativ 的 ListView 从rn 这个跨平台框架诞生 到目前为止 一直 被 开发者 诟病,卡顿 视图不回收 内存爆炸 滑动不流畅 等问题 虽然官方有出 FlatList 带有视图重用的
组件但是 性能表现 一滚动 内存疯狂涨 cpu 占用 超过 100% 而且 列表过长 快速滑动 会有 渲染空白的 问题 (由于RN的渲染通知机制 快速滑动 需要大量计算 触发渲染 cpu占用过高 而且js单线程 再加上 需要和原生交互 等等 性能消耗问题 导致 ) 听说fb有要重构rn的消息 但是不知道 这次 框架核心设计 是否和原来的 有质的提升
ListView 性能解决方案 原生代码实现 滑动流畅不卡顿 内存回收 视图重用 上拉刷新 下拉加载 支持本地 自定义刷新动画 支持itemView动态 高度
性能表现 优于 目前所有 列表组件。
github地址 react-native-nlist
### IOS实现
使用 UITabView
基于 react-native-tableview 做了优化内存 api封装 添加MJRefresh 封装刷新 加载事件 等
### Android 实现
Android 使用 Recyclerview 实现 自己编写的一套 视图模板重用逻辑 加上 滚动事件 下拉刷新 下拉刷新 SmartRefresh 等封装
### 性能测试
#### ios 使用 iphone 6s 10015 条数据的列表,大量的图片. 而且图片没有使用 [SDWebImage] 缓存库和内存缓存优化
我疯狂的滑动列表到 4679条数据 这个时候 内存的使用量 是 111m 附图中也可以看到 cpu 使用情况 整个过程最高没有超过 34% cpu占用率
#### Android 使用 小米6 同意 10015 条数据的超长列表, 和大量图片资源. 而且图片没有使用 [Glide] 缓存库和内存缓存优化
我疯狂的滑动列表到 2569条数据 Android 的列表滚动有最大阈值限制不像苹果是一个加速过程 越滑滚动越越快 当我滑到2千多条数据的时候已经用了2分钟的样子 手痛划不动了 ~~(╯﹏╰) 这是 内存使用情况 123 MB
网友评论