React-redux 重新选择性能

Question

我对在 React redux 应用程序中使用 reselect 时的性能有疑问。

Reselect 库用作记忆层来缓存为提高性能而进行的计算，但是如果您不需要任何 calculations/logic 完成怎么办？

对单个数据使用选择器是否更高效，还是我应该只使用标准连接方法？

Answer 1

当您不需要任何 calculation/logic 时，只需编写一个接受应用程序状态和可选的进一步输入作为参数的普通选择器。像这样：

const getAnItemById = (state, itemId) => state.items.find(item => item.id === itemId);

然后通过 Redux connect 将您的选择器连接到您的组件。

如果不需要 caching/memoization 超能力，请不要使用 reselect！

Answer 2

正如 toomuchdesign 已经说明的那样。如果确实没有 calculations/logic 并且选择器只是 return 对对象或状态树中某处存在的值的引用。然后就不需要记忆选择器，因为浅层相等性检查将由 connect.

完成

因此，在决定是使用普通选择器还是使用 createSelector 时，一个很好的问题是：这个对象、数组或函数的引用将由选择器 returned每次执行都不一样？

人为的例子：

const getSelectedItems = state => state.items.filter(i => i.selected)

每次调用选择器时都会产生不同的数组。

鉴于：

const getFullName = createSelector(
  state => state.items,
  items => items.filter(i => i.selected)
)

如果 items 数组发生变化，只会 return 一个新数组。

因此，虽然将选择器计算的复杂性视为决策的基础可能很诱人，但引用缓存是实现 reselect 性能优势的关键因素，因为它将导致减少不必要的渲染。因此，虽然选择器本身的记忆可以带来性能优势。不要忘记缓存引用本身可以带来的性能优势。

React-redux reselect performance