FlatList在项目滚动时呈现问题

Question

我有一个FlatList来渲染我的产品。

平面列表：

            <FlatList
              ListFooterComponent={this._renderFooter}
              vertical={true}
              numColumns={2}
              data={this.state.produtos}
              keyExtractor={item => item.productId.toString()}
              getItemLayout={this._getItemLayout}
              renderItem={this._renderItem}
              onEndReached={this._handleLoadMore}
              onEndReachedThreshold={0.5}
              initialNumToRender={16}
              onRefresh={this._handleRefresh}
              refreshing={this.state.refreshing}
            />

_renderItem

_renderItem = ({item}) => <DisplayCard produto={item} handlerOpen={this.handlerOpen}/>

DisplayCards.js

export default class DisplayCard extends PureComponent {
}

代码完整：

https://jsfiddle.net/5zk4j6xo/

问题：

  

VirtualizedList：您有一个很大的列表，更新缓慢-使   确保您的renderItem函数呈现遵循React的组件   性能最佳做法，例如PureComponent，shouldComponentUpdate，   等