您可以将一组项目 ID 传递给 Flatlist 吗？

Question

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

我更愿意将项目 ID 数组传递给父组件，并将每个项目 ID 传递给子组件 ListItem，后者将连接到商店并检索其自己的项目对象。

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

React Native Flatlist 是否可行？

Answer 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 组件设为纯组件，以便在数据更改时仅受影响的子 ListItem 重新渲染？ react-redux 的 connect 函数只是将连接的 ListItem 视为纯组件，以便跳过重新渲染。

您可以将一组项目 ID 传递给 Flatlist 吗？

Can you pass an array of item IDs to a Flatlist?

javascript

react-native

redux

react-redux

react-native-flatlist