【发布时间】：2018-06-20 11:42:45
【问题描述】：
我有 250 多个产品列表。 第一次加载页面时，它既流畅又快速，但是当我在数据中应用过滤器并重新渲染时，Flatlist 需要很长时间才能加载。 3天过去了，我真的很震惊，不知道该怎么办。
请注意我点击开关后所用的时间。
代码： 有 2 个组件。
名单：
toggleVeg = (onlyVeg) => {
this.setState({ showVegLoader: true });
const categories = this.state.restaurant.categories;
const allproducts = [];
if (onlyVeg) {
for (let i = 0; i < categories.length; i++) {
for (let j = 0; j < categories[i].products.length; j++) {
if (categories[i].products[j].is_veg) {
allproducts.push(categories[i].products[j]);
}
}
}
} else {
for (let i = 0; i < categories.length; i++) {
for (let j = 0; j < categories[i].products.length; j++) {
allproducts.push(categories[i].products[j]);
}
}
}
this.setState({ onlyVeg, allproducts, showVegLoader: false });
}
renderRow(product, index) {
return (
<FoodItem
key={index}
color={this.state.color}
index={index}
product={product}
quantity={this.state.products[product.id].quantity}
// showNonVeg={!this.state.onlyVeg}
increment={this.increment}
decrement={this.decrement}
incrementModal={this.incrementModal}
decrementModal={this.decrementModal}
/>
);
}
render() {
<FlatList
style={{ padding: 0 }}
data={this.state.allproducts}
renderItem={({ item, index }) => this.renderRow(item, index)}
keyExtractor={(item, index) => index}
extraData={this.state}
removeClippedSubviews
/>
);
}
FoodItem 组件：
render() {
const { index, product, quantity, color } = this.props;
let image = veg;
if (product.is_veg !== 1) {
image = nonveg;
}
// let opacity = 1;
// let height = 'auto';
// let width = 'auto';
// if (!showNonVeg && product.is_veg !== 1) {
// opacity = 0;
// height = 0;
// width = 0;
// }
return (
<View key={index}>
<Row style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 5 }}>
<Left
style={{ flex: 0.08,
marginTop: 3,
alignItems: 'flex-start',
alignSelf: 'flex-start',
justifyContent: 'flex-start' }}
>
<Image
style={{ width: 16, height: 16 }}
source={image}
/>
</Left>
<Body
style={{ flex: 0.62 }}
>
<Row
style={{ flex: 1,
padding: 0,
alignSelf: 'flex-start',
alignItems: 'center' }}
>
<Subtitle
style={{ fontSize: 14,
fontFamily: 'Montserrat',
color: 'rgba(0,0,0,0.8)',
fontWeight: '500' }}
>
{product.name}
</Subtitle>
</Row>
<Row
style={{ flex: 1,
padding: 0,
alignSelf: 'flex-start',
alignItems: 'center' }}
>
<Caption>
{constants.CURRENCY} {product.variants[0].price.toFixed(2)}
</Caption>
</Row>
</Body>
<Right style={{ flex: 0.3 }}>
{uiQuantity}
</Right>
</Row>
<Subtitle
style={{ paddingLeft: 25,
fontFamily: 'Montserrat',
color: 'rgba(0,0,0,0.4)',
fontWeight: '400',
fontSize: 12
}}
>
{product.description}
</Subtitle>
</View>
);
}
附：删除了一些不相关的代码。
【问题讨论】：
-
FoodItem 是纯组件
-
是的。导出默认类 FoodItem 扩展 React.PureComponent
-
所以这个问题还没有解决？现在是 1 月 21 日，10 天过去了
-
尚未找到任何解决方案。虽然我确实使用了另一个列表：github.com/Flipkart/recyclerlistview 似乎足够快。仍在实施，如果足够好将发布解决方案。
标签： react-native jsx react-native-flatlist