Javascript 反应本机平面列表键

我有一个平面列表，它呈现一个自定义组件“卡”。我将此函数传递为keyExtractor：

const keyExtractor = (item) => item.id;

我的renderItem函数如下所示：

const renderItem = ({item, index}) => <Card {...item} />

constrenderitem=（{item，index}）=>

我的问题是：我应该向卡组件传递密钥吗？我是说，我应该这么做吗

const renderItem = ({item, index}) => <Card key={item.id} {...item} />

constrenderitem=（{item，index}）=>

要避免我的平面列表重新渲染组件并提高列表的性能？我见过一些人这样做。。。但我从来没有做过。如果答案是肯定的，那么如果每个渲染组件都有一个键，为什么我们需要keyExtractor

当然，如果我将密钥传递给自定义组件，我将在其实现中执行此操作：

return <View key={props.key}>...</View>

返回。。。

---

谢谢。

您的数据中应该有一个唯一的属性，并将其用作密钥。无需将

键

传递给

卡

组件

如果您的数据如下所示：

const renderItem = ({item, index}) => <Card {...item} />

数据=[
{
id:'a12f56e5'，
名字：“我”，
年龄:24
}
// ...
];

然后您可以使用

id

作为键

---

另外，请查看以提高您的平面列表性能

我已经按照所有步骤提高了我的平面列表的性能，但总是落后于Android:C此外，我已经从平面列表移动到虚拟化列表，因为我正在实现一个带有分页的无限滚动。你做过这样的实验吗？（My items扩展了PureComponent，我已经用WindowsSize={35}、maxToRenderPerBatch={14}、updateCellsBatchingPeriod={50}玩过了）您可以使用FlatList实现无限滚动。请考虑使用 PueCuffe并不总是最好的选择！