Question

我有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>
    );
  }

P.S。删除了一些无关的代码。

Answer 1

1）函数toggleVeg的运行速度是否足够快？（可能有问题）

2）您对产品有id吗？如果是，请在keyExtractor={(item) => item.id}中使用它们以避免重新呈现相同的产品项目

React Native Flatlist重新渲染非常慢

1 个答案: