您可以将一组项目 ID 传递给平面列表吗？答案

【问题标题】：Can you pass an array of item IDs to a Flatlist?您可以将一组项目 ID 传递给平面列表吗？
【发布时间】：2019-08-20 03:02:25
【问题描述】：

我有一个标准化的 redux 状态形状，我需要从状态呈现项目列表。

我希望将项目 ID 数组传递给父组件，并将每个项目 ID 传递给子 ListItem，子 ListItem 将连接到商店并检索自己的项目对象。

这样我可以避免父组件中昂贵的 mapState 调用，这会触发所有子组件的重新渲染ListItem 组件。

React Native Flatlist 可以做到这一点吗？

【问题讨论】：

标签： javascript react-native redux react-redux react-native-flatlist

【解决方案1】：

是的，这绝对是可能的。这是一个速写：

function ListItem({item}) {
  return (...);
}
function mapStateToProps(state, ownProps) {
  // look up item from state using ownProps.id e.g. if `state` maps ids to objects
  const item = state[ownProps.id];
  return {
    item,
  };
}
const ConnectedListItem = connect(mapStateToProps)(ListItem);

function List({itemIds}) {
  return (
    <FlatList
      data={itemIds}
      renderItem={({item}) => <ConnectedListItem id={item} />}
      ...
    />
}

// example: <List itemIds=[1, 2, 3] />

但是，如果您只是担心重新渲染和性能，为什么不将 ListItem 组件设为纯组件，以便在数据更改时只有受影响的子 ListItems 重新渲染？ react-redux 的 connect 函数只是将连接的 ListItem 视为纯组件，以跳过重新渲染。

【讨论】：

非常感谢您的回复！我对纯组件不是很熟悉，但我正在努力学习更多。你介意多解释一下它们是如何工作的吗？ Flatlist 组件不是纯组件吗？
是的，你是对的，FlatList 本身是一个纯组件，但是假设你的 data 列表中的一项发生了变化，而其他项保持不变 - FlatList 将需要重新渲染（因为 data 属性已更改）但每个单独的 ListItem 组件不需要，只需要更改的那个。通过将ListItem 组件标记为纯组件，react 只会在 props 更改时重新渲染它。您可以扩展 PureComponent 而不是 Component 或将 React.memo 用于基于函数的组件以启用优化。