优化FlatList项性能的最佳方法
优化FlatList项性能的最佳方法
提问于 2019-05-07 13:59:25
这是一个简单的FlatList：
class Products ..
render() {
return (
<FlatList
renderItem={this._renderItem}
);
}我希望创建一个项目列表，并按onPress项导航到详细页面。
能告诉我哪种方法更好吗？
方法1:
在子组件(CardProduct组件)中插入导航到详细信息页，如下所示：
_renderItem = ({item}) => (
<CardProduct
id={item.id}
title={item.title}
/>
);在CardProduct组件中：
render() {
const { id,title } = this.props;
return (
<Card style={{flex:1}}>
<CardItem cardBody button onPress={() => this.props.navigation.navigate('Details',{productId:id})}>
...
);
}方法2:
在当前组件(Products组件)中插入导航到详细信息页，如下所示：
_onPressItem = (id: string) => {
this.props.navigation.navigate('Details',{productId:id});
};
_renderItem = ({item}) => (
<CardProduct
id={item.id}
title={item.title}
onPressItem={this._onPressItem}
/>
);在CardProduct组件中：
_onPress = () => {
this.props.onPressItem(this.props.id);
};
render() {
const { id,title } = this.props;
return (
<Card style={{flex:1}}>
<CardItem cardBody button onPress={this._onPress}>
...
);
}我以前做过方法1，但我读过本指南。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-05-07 15:29:21
简短答覆：
你应该去找method2。
解释：
在method1中，您在CardItem's onPress中使用箭头函数，因此每次重新呈现CardProduct时，都会创建onPress的新引用，这将强制CardItem重新呈现，即使所有其他道具都保持不变。在方法2中，您将函数绑定到上下文，这不会强制重新呈现CardItem。
顺便说一句，一般来说，在render()中防止箭头函数的使用是个好主意。
Stack Overflow用户
发布于 2019-05-07 14:42:41
在react本机平面列表中进行性能优化的一个步骤是为renderItem使用无状态功能组件.你应该总是给每个项目一个独特的钥匙。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56024339
复制相关文章
相似问题
腾讯云开发者
