javascript - 您可以将一组商品ID传递给Flatlist吗？

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

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

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

React Native Flatlist可以做到吗？

最佳答案

是的，那绝对有可能。这是一个简单的草图：

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视为纯组件，以便跳过重新渲染。

关于javascript - 您可以将一组商品ID传递给Flatlist吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57566180/