众所周知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里面可以根据业务的需求进行相关逻辑判断,最终都是以减少渲染次数达到优化。