反应本机 FlatList 键

Question

我有一个 FlatList，它呈现一个自定义组件“Card”。我作为 keyExtractor 传递这个函数：const keyExtractor = (item) => item.id;我的 renderItem 函数如下所示：const renderItem = ({item, index}) => <Card {...item} />我的问题是：我应该将密钥传递给 Card 组件吗？我的意思是，我应该这样做吗const renderItem = ({item, index}) => <Card key={item.id} {...item} />避免我的 flatlist 重新渲染组件并提高我的列表的性能？我见过有人这样做……但我从来没有这样做过。如果答案是肯定的，那么如果每个呈现的组件都有一个密钥，为什么我们需要 keyExtractor？当然，如果我将密钥传递给我的自定义组件，我将在其实现时执行此操作：return <View key={props.key}>...</View>谢谢。

Answer 1

您应该在数据中拥有一个独特的属性并将其用作键。无需将 传递key给您的Card组件。

如果你的数据是这样的：

data = [

  {

    id: 'a12f56e5',

    name: 'me',

    age: 24

  }

  // ...

];

然后你可以使用id作为关键。

另外，请看一下这个以提高您的 FlatList 性能