规范化数据频繁变更时，如何处理非规范化数据以传入FlatList？

这个问题我太熟悉了——规范化数据确实能让数据管理更清晰，但遇到这种高频交互的字段（比如星标），很容易因为memoization失效导致全量重算，进而拖慢FlatList的渲染。我给你几个实用的解决方案，按优先级排序：

Reselect的memoization是基于依赖的引用变化的，如果你的根选择器依赖整个规范化数据对象，只要其中任何一个字段变了，整个列表都会重新计算。解决办法是把选择器拆到单个列表项级别：

• 首先创建一个获取所有列表项ID的选择器：

  const selectItemIds = createSelector(
    [selectNormalizedItems],
    (items) => Object.keys(items)
  );
  

• 然后为单个项创建带星标的选择器，把星标状态作为单独的依赖：

  const selectItemWithStar = (itemId) => createSelector(
    [
      (state) => selectNormalizedItems(state)[itemId],
      selectStarredItems, // 单独存储星标状态的选择器，结构如{[id]: boolean}
    ],
    (item, starred) => ({
      ...item,
      isStarred: starred[itemId] || false
    })
  );
  

• 最后在组件里，通过ID列表映射每个项的选择器结果：

  const itemIds = useSelector(selectItemIds);
  const getItemWithStar = useCallback((id) => useSelector(selectItemWithStar(id)), []);
  // FlatList的data用itemIds，renderItem里调用getItemWithStar(item.id)
  

这样只有星标变更的那个ID对应的选择器会重新计算，其他项直接用缓存结果，彻底避免全量重算。

你提到的“拆分交互数据”思路完全可行，但不用在启动/获取数据时拆分主数据，而是把星标这种高频交互的状态单独存在一个独立的Redux slice（或者组件本地state，如果星标不需要全局同步）：

• 新建一个starredSlice，存储结构是{ [itemId: string]: boolean }，只记录哪些项被星标；
• 主数据保持规范化存储，不包含星标字段；
• 点击星标时，只更新starredSlice里对应的ID，不碰主数据；
• 然后通过Reselect选择器把主数据和星标状态合并，如方案一所示。

这种方式的好处是主数据和交互状态解耦，主数据变更不会影响星标状态的计算，星标变更也只会触发最小范围的重算。如果星标不需要全局共享，甚至可以把这个状态存在FlatList所在的组件state里，连Redux的dispatch都省了，性能更优。

即使选择器优化了，FlatList如果检测到data数组的引用变化，还是可能全量渲染。所以要配合以下优化：

• 给每个列表项设置唯一且稳定的key（用item的ID）；
• 让列表项组件成为纯组件（React.memo），只依赖自身的item数据，这样只有当item的props变化时才会重渲染；
• 避免在renderItem里创建新对象或函数，尽量把逻辑提到外部用useCallback缓存。

这样即使选择器返回了新的item对象，只有变更的那一项会被重新渲染，FlatList不会整个刷新。

优先尝试方案一+方案三，这是最贴合你现有架构的优化方式，不需要大幅改动数据结构；如果星标状态不需要全局同步，方案二的本地state版本会更轻量。核心思路就是把“全量计算”拆成“按需计算”，让Reselect的memoization真正生效，同时让FlatList只渲染必要的项。

内容的提问来源于stack exchange，提问作者Primate