javascript - 您可以将项目 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视为纯组件，以便跳过重新渲染。