React Native FlatList优化

众所周知React Native刷新控件一般都是采用setState,对于FlatList来说就要想办法减少item的渲染，采用shouldComponentUpdate自己定义什么情况下执行刷新，有时候可能会有这样的需求，指定某个item执行刷新，在React Native里面没有可以获取指定item的方式，只能在数据上做考虑，具体操作如下：

定义Item需要的数据源

export class ItemData{constructor(){//指定某种状态this.isChanged = false}
}

Item中增加业务需求判断，比如列表跳转详情，回调修改当前选择的列表Item数据，简易代码如下：

Item.js

//定义外部传递属性
static propTypes = {//数据data:PropTypes.object.isRequired,//是否改变isChanged:PropTypes.bool,
}
//定义外部属性默认值
static defaultProps = {isChanged:false,
}
shouldComponentUpdate(nextProps, nextState) {//判断什么情况下刷新return this.props.isChanged != nextProps.isChanged;
}

Main.js

//某种需要刷新item的场景
onChangeValueHandler = (index) => {//实际业务代码需要自己来判断let item = this.state.listDatas[index];item.isChanged = !item.isChanged;this.setState({listDatas:.....})
}
//渲染item 并以props的属性传入组件
onRenderItem = ({itemData}) => {return (<Item data={itemData} isChanged={itemData.isChanged}></Item>)
}

shouldComponmentUpdate里面可以根据业务的需求进行相关逻辑判断，最终都是以减少渲染次数达到优化。

React Native FlatList优化相关推荐

如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
React Native性能优化总结
React Native开源已经接近2年时间,京东.携程.58同城等互联网公司都在使用,公司于今年也开始使用,并推广到各个新项目.本文重点分享我们遇到的一些问题以及优化方案. 一.为什么会引入Reac ...
React Native 启动速度优化——Native 篇（内含源码分析）
Web 开发有一个经典问题:「浏览器中从输入 URL 到页面渲染的这个过程中都发生了什么?」据我考据这个问题起码有十年历史了.在日新月异学不动的前端圈子里,这个问题能一直被问,就是因为因为它是个非常 ...
React Native FlatList和SectionList列表组件
FlatList 之前使用的组件是ListView,当时要添加一个下拉刷新,上拉加载的功能,所以对ListView做了一些封装,但是后来看官方文档,不建议再使用ListView,因为效率问题,做过An ...
react native FlatList
高性能的列表组件 import React,{Component} from 'react'; import {View,Text,FlatList} from 'react-native';expo ...
React Native FlatList属性及使用详情
FlatList属性及用法 FlatList属性 FlatList用法 FlatList属性 data:列表数据 numColumns:列数组件内元素必须是等高的,无法支持瀑布流布局 renderI ...
react native FlatList 使用详解
高性能的简单列表组件,支持下面这些常用的功能: 完全跨平台. 支持水平布局模式. 行组件显示或隐藏时可配置回调事件. 支持单独的头部组件. 支持单独的尾部组件. 支持自定义行间分隔线. 支持下拉刷新. ...
react native FlatList遇到的问题
1.FlatList可以渲染多条数据,ListHeaderComponent={header组件},如果想让header组件带有粘性,就用stickyHeaderIndices={[0]},如果想有好 ...
【react native】Flatlist实现上拉滚动加载
参考博客:React Native FlatList上拉加载.FlatList enum FooterType {Null = 0,NoData = 1,LoadingData = 2, }expor ...

React Native FlatList优化

React Native FlatList优化相关推荐

最新文章

热门文章