React native 平面列表并不像错误所说的那样平滑

错误显示：VirtualizedList：您有一个很大的列表，但它的运行速度很慢 更新-确保renderItem函数渲染以下组件 React性能最佳实践，如PureComponent、shouldComponentUpdate、Her我是做什么的

1-在组件将挂载时，我调用一个函数，此函数向我的操作发送一个请求。在这种情况下，retrievExploreFeedthis.state.limit，this.state.offset再次此函数检索数据并将其放入我的redux存储。正如你所能做的那样，在承诺得到解决后，我从我的道具中获取数据并放入resultSet数组。当调用下一个fetch（另一个函数）时，它将返回下一批结果并附加到resultSet

通过使用新的_偏移量0和limit为20，如果调用函数从api获取结果，api将返回一个结果集，其中包含20条记录，新的_偏移量为20。我再次使用从api返回的新的_偏移量（本例为20），并将其放入下一个调用中以获取数据。下一次迭代api将给出20个结果，新的_偏移量为40。等等

在这里，api每次都返回新的_偏移量。通过使用新的_offsetim 得到下一批结果我是说下一页

  _fetchResult = () => {

        //calling action and getting the initial results
        //filling the result set using redux store and putting to state
        //Getting the new offset and putting into state

        this.props.actions.retrievExploreFeed(this.state.limit, 
        this.state.offset)

              .then(() => {
                    this.setState({
                          resultSet: this.props.exploreFeed.data,
                          offset: this.props.exploreFeed.new_offset,
                          isLoading: false,
                          isRefreshing: false
                    });
              });
  }

下一个来自平面列表的呼叫在到达结束时立即开始 onEndReached={=>this.\u fetchResultNextResult} onEndReachedThreshold={0.7}

_fetchResultNextResult = () => {

        console.log('next fetch is called');

        const myHeaders = new Headers({
              'token': constants.TOKEN
        });

        fetch(`${constants.API}?tag=product_list&limit=${this.state.limit}&offset=${this.state.offset}`, {
              method: 'POST',
              headers: myHeaders,
        })
        .then(res => res.json())
        .then(payload => {

              this.setState({
                    resultSet: [...this.state.resultSet, ...payload.data],
                    offset: payload.new_offset,
              });

        });

  };

扁平列表

---

我认为您看到了性能的下降，因为您的行大小可变，因此必须在渲染时计算每行的大小

可以在将数据传递到平面列表之前过滤掉空行，和/或使用getItemLayout指定每行的高度

getItemLayout是一个可选的优化，如果您提前知道项目的高度，我们可以跳过动态内容的测量

---

一次有多少个结果被输入到列表中？20正如您所看到的，我已经为返回结果的函数提供了limit作为参数。此外，我还更新了我关于limitOne的问题猜测可能是尝试RemoveClippedSubview。我觉得你显示的项目数量可能不是问题所在-我有一个200-300个项目的列表，但没有得到这个错误谢谢你的回答。但我认为这里的问题是所有的东西都是同时呈现的。让我们假设在滚动时，我转到屏幕底部，调用我的_fetchResultNextResult函数，我从api中附加新检索到的数据，并附加到旧结果数组，如以下结果集：[…this.state.resultSet，…payload.data]，然后在进行渲染时，只应正确渲染新添加的结果？。如您所见，我在渲染组件中使用了pureComponent。为什么pureComponent不工作？因为David说的话，它一次就呈现出来了。它不知道高度，所以不知道渲染的是什么。他的回答是正确的。

_fetchResultNextResult = () => {

        console.log('next fetch is called');

        const myHeaders = new Headers({
              'token': constants.TOKEN
        });

        fetch(`${constants.API}?tag=product_list&limit=${this.state.limit}&offset=${this.state.offset}`, {
              method: 'POST',
              headers: myHeaders,
        })
        .then(res => res.json())
        .then(payload => {

              this.setState({
                    resultSet: [...this.state.resultSet, ...payload.data],
                    offset: payload.new_offset,
              });

        });

  };

<FlatList
       data={func.formatData(this.state.resultSet, constants.COLUMS)}
       numColumns={constants.COLUMS}
       onEndReached={()=> this._fetchResult()}
       onEndReachedThreshold={0.7}
       keyExtractor={(item, index) => index.toString()}
       removeClippedSubviews
       getItemLayout={(data, index) => {
                const width = Dimensions.get('window').width;
                return { length: width, offset: width * index, index };
       }}
       renderItem={(info) => (
              <ProductGrid
                      data={info.item}
                      showProduct={this._productSelectedHandler}
               />
     )}

/>

-------------------------------------
Product Grid as pure component
--------------------------------------

import React, { PureComponent } from 'react';
import { View, TouchableWithoutFeedback, StyleSheet, Image, Dimensions } from '   react-native';

import * as constants from "../../Constants/api";

class ProductGrid extends PureComponent {



  render() {

        const { id, data, showProduct } = this.props;

        if (data.empty === true) {
              return <View style={[styles.item, styles.itemInvisible]} />;
        }

        return (
              <TouchableWithoutFeedback onPress={showProduct.bind(this, id)}>
                    <View style={styles.item}>
                          <Image
                                style={{ height: '100%', width: '100%' }}
                                source={{ uri: data.product_image }}
                          />
                    </View>
              </TouchableWithoutFeedback>
        )
    }

};