React Native Flatlist重新渲染非常慢

Question

我有250多種產品。 第一次加載頁面時，它既平滑又快速，但是當我在數據中應用過濾器並重新呈現Flatlist時，加載時間很長。 我真的很震驚過去三天了，不知道該怎么辦。

請注意單擊開關后花費的時間。

代碼：有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>
    );
  }

PS刪除了一些不相關的代碼。

Answer 1

1）功能toggleVeg是否足夠快地工作？ （可能是其中的問題）

2）你有id的產品？ 如果是，請在keyExtractor={(item) => item.id}使用它們，以避免重新渲染相同的產品項目

React Native Flatlist重新渲染非常慢

問題描述

1 個解決方案

解決方案1
0 2018-01-11 09:07:49

React Native Flatlist重新渲染非常慢

問題描述

1 個解決方案

解決方案1 0 2018-01-11 09:07:49

解決方案1
0 2018-01-11 09:07:49