Question

我有一个连接组件，我想要检索一个对象数组。在我的商店中，有一系列ID，以及一个我保留这些项目的对象：

const state = {
  items: [0, 1, 2],
  itemsById: {
    0: {},
    1: {},
    2: {},
  },
}

所以使用react-redux的connect函数，我在我的组件中执行此操作以注入正确的数组：

const mapStateToProps = (state) => ({
  items: state.items.map((itemId) => state.itemsById[itemId]),
})

我的应用会经常触发更新（我在requestAnimationFrame中发送操作），但items数组在此过程中不会更改。通过使用React Perf插件分析应用程序，似乎我的连接组件进行了不必要的渲染，我不明白为什么，因为状态中的items不会改变。

我已经尝试使用重新选择来制作一个memoized选择器，但它似乎没有改变任何东西。

更新（解决方案）

当您使用通过重新选择创建的选择器时，它会起作用。我的问题出现在选择器本身：我的items数组位于父对象中，它经常更新，我选择的是这个对象，而不是直接选择items数组。

不要这样做：

const parentSelector = (state) => state.parent
const itemsByIdSelector = (state) => state.itemsById
const selector = createSelector(
  parentSelector,
  itemsByIdSelector,
  (parent, itemsById) => parent.items.map(...)
)

这样做：

const itemsSelector = (state) => state.items
const itemsByIdSelector = (state) => state.itemsById
const selector = createSelector(
  itemsSelector,
  itemsByIdSelector,
  (items, itemsById) => items.map(...)
)

Answer 1

每次调用connect时都会创建一个新数组：

const mapStateToProps = (state) => ({
  items: state.items.map((itemId) => state.itemsById[itemId]),
})

要防止使用memoized selector，每次都会返回相同的数组，除非实际发生了变化。选择器是一种计算来自状态的派生数据的方法。 Reselect是redux的memoized选择器库。

React-redux在创建数组时重新渲染

更新（解决方案）

1 个答案: