Question

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

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

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

使用反应式本机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吗？

1 个答案: