FlatList：仅渲染需要更新的项目，仍会收到“您的更新列表很慢”警告

Question

我正在使用FlatList渲染大约1200个项目。 renderItem创建一个实现shouldComponentUpdate的组件。我添加了console.log语句，并确认只有FlatList加载新项目时，才重新加载这些新项目。我仍然收到可怕的VirtualizedList: You have a large list that is slow to update警告。

我正在与世博会合作

我已设置OnEndReachedThreshold={1}，已添加getItemLayout并为renderItem创建的PureComponent设置了硬编码高度。我已将initialNumToRender设置为页面大小（10）

export default class MyComponent extends React.Component {

    shouldComponentUpdate(newProps, nextState) {
        if (this.props.title != newProps.title) 
        {
            return true;
        }
        if (this.props.description != newProps.description) 
        {
            return true;
        }
        return false;
    }
}

class MyScreen extends React.PureComponent {  
    constructor(props) {
        super(props);

        this.state = {
          ... /*snip*/
          pageSize: 10,
          pageNumber: 0, // load, for FlatList, the first page by default, containing 10 items
          flatListObjects: this.props.keys.slice(0, 10).map(key => this.props.objects[key]) // Take the 0th element to the 9th
        };
    }

    _renderItem = (data, rowMap) => (
        <MyComponent
            style={{ height: 50 }}
            item={data.item}
            rightSwipeButtons={this._rightSwipeButtons}
            left={() => <List.Icon color="#000" icon={getStatusIcon(data.item)} />}
            title={"Title"}
            description={"Description"}
            onPress={() => {
                alert('pressed');
            }} />
    )


<FlatList style={Styles.scrollViewContainer} 
          contentContainerStyle={Styles.scrollContentContainer} 
          refreshControl={
              <RefreshControl
                  refreshing={this.state.refreshing}
                  onRefresh={this._refresh}
                  />
          }
          initialNumToRender={this.state.pageSize}
          scrollEnabled={!this.state.isSwiping}
          keyExtractor={(item, index) => ((item.id && item.id.toString()) || (item.idempotentId && item.idempotentId.toString()))}
          onEndReachedThreshold={1} 
          onEndReached={this._flatListOnEndReached}
          data={this.state.flatListObjects}
          renderItem={this._renderItem}
          getItemLayout={this._getItemLayout}
          ListFooterComponent={this._renderListFooter}
/>                


_flatListOnEndReached = ({ distanceFromEnd }) => 
{
    console.log('_flatListOnEndReached');
    // Check if there is more to be loaded from the store
    if (this.state.flatListObjects.length < this.props.keys.length)
    {
        console.log('loaded', this.state.flatListObjects.length, 'todo', this.props.keys.length);

        let pageSize = this.state.pageSize;
        let nextPageNumber = this.state.pageNumber + 1;

        let nextPage = this.props.keys.slice(nextPageNumber * pageSize, nextPageNumber * pageSize + pageSize).map(key => this.props.objects[key]);

        // There's more. Increase the page number and load extra keys
        this.setState(
        { 
            ...this.state,
            pageNumber: nextPageNumber,
            flatListObjects: this.state.flatListObjects.concat(nextPage)
        });        
    }
}

我一直收到警告VirtualizedList: You have a large list that is slow to update，即使MyComponent项目仅在FlatList加载更多时才会呈现。

我想确保FlatList的性能良好。我该怎么做才能使React Native FlatList满意？