ReactNative FlatList大数据渲染问题（渲染太多次） Download

这是我的PureComponent类：

class SampleComponent extends React.PureComponent {
    render() {
        return(
            <View key={this.props.id} style={{padding: 8}}>
                <Text bold style={{fontSize: UI.fontSize.lg}}>{this.props.title}</Text>
            </View>
        );
    }
}

我正在为每个项目（行）使用它。

我的应用组件如下：

class App extends React.Component {
    renderTimes;
    constructor(props) {
        super(props);
        this.state= {
            data: [],
        };
        this.renderTimes = 0;
    }

 componentDidMount() {
        this.fakeLoad();
    }


fakeLoad() {
        const start = this.state.data.length + 1;
        const data = [];
        for(let x = start; x <= start + 100; x++) {
            data.push({id: x.toString(), title: `Item #${x}`});
        }
        this.setState((prevState) => ({
            data: prevState.data.concat(data)
        }));
    }

 render() {
     return (
            <View style={{flex:1}}>
                <FlatList
                    data={this.state.data}
                    extraData={this.state.data}
                    renderItem={({item}) => {
                        this.renderTimes++;
                        console.log("render item " + item.id + " / " + this.renderTimes);
                        return (
                            <SampleComponent id={item.id} title={item.title}/>
                        );
                    }}
                    onEndReachedThreshold={0.5}
                    onEndReached={this.fakeLoad.bind(this)}
                />
            </View>
        );
}

}

fakeLoad方法将100个数据添加到当前状态.data 但是在console.log中，我收到了这个消息（只是日志的尾部）：

LOG渲染项目191/2503  LOG渲染项目192/2504  LOG渲染项目193/2505  日志渲染项目194/2506  LOG渲染项目195/2507  日志渲染项目196/2508  日志渲染项目197/2509  LOG渲染项目198/2510  日志渲染项目199/2511  LOG渲染项目200/2512  日志渲染项目201/2513  LOG渲染项目202/2514

这意味着我滚动到Item＃202，总渲染计数器显示2514。 当然，我会一遍又一遍地看到＃1（第一个）的渲染项目。

我该怎么办？

感谢您的帮助...

1 个答案:

答案 0 :(得分：0)

FlatList将根据键重复使用该项目，您应添加

 keyExtractor={item => item.id}

。有关详细信息，您可以查看此link解释。