У меня есть список из 250+ продуктов. В первый раз, когда страница загружается, она плавная и быстрая, но когда я применяю фильтр к данным и перерисовываю, Flatlist загружается долго. Я действительно поражен последние 3 дня и не знаю, что делать.
Ссылка: http://gph.is/2FoBbaO
Обратите внимание на время, прошедшее после того, как я нажму на переключатель.
Код: Есть 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>
);
}
P.S. удалил некоторый код, который не имел значения.
