React Native FlatList-重新渲染/挂载子项不止一次

Question

https://snack.expo.io/SykFiqQ8E

我一直在编写使用FlatList（https://facebook.github.io/react-native/docs/flatlist）的React-native应用程序。我注意到列表中的子项存在一些性能问题，如果我向数据集添加更多数据，则FlatList组件将多次渲染/装入子项。用户看不到该事实，但是在堆栈跟踪中，我可以通过在每次渲染时仅执行一次Alert来证明它多次渲染该子项。

请查看小吃以获取有关该问题的实时演示，然后单击“添加项目”。它将提醒子项不止一次。我无法确定我的实现是否错误，或者是否需要在react native的github上创建问题。

import * as React from 'react';
import { Text, View, StyleSheet, FlatList, Alert, Button } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  state = {
    data: [{key: 'i love rn but why do my items render/mount more than once'}]
  }

  addItem() {
    const data = this.state.data.concat({key: "item#" + this.state.data.length.toString()})
    this.setState({ data })
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.data}
          renderItem={({item}) => <Text>{item.key} {Alert.alert(item.key)}</Text>}
        />
        <Button onPress={this.addItem.bind(this)} title="Add Item" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  }
});

我不确定他们的回复速度如何，因此希望在这里获得一些反馈。