我什么时候应该在 useSelector() 中使用自定义相等 function？

Question

我试图了解何时需要在useSelector()中使用自定义相等 function 。

我有一个选择器，它返回一个简单的 object 为：

const data = useSelector(state => state.data) // => { a: "foo", b: "bar }

我虽然因为data是 object，我需要使用自定义相等 function 以避免不必要的重新渲染，如文档中所述：

使用 useSelector()，每次返回一个新的 object 总是默认强制重新渲染。

但后来我注意到我的组件仅在data更改时才重新渲染。 我假设默认相等 function 可能适用于对象，但可以肯定的是我尝试使用自定义 function：

const data = useSelector(state => state.data, (a, b) => a === b));

如果data没有改变，它将始终返回true 。

在 Javascript 中，如果我尝试用===比较两个对象，它将返回false ，因为引用不同。 但是这里使用useSelector() ，因为它返回true这意味着引用是相同的。

现在，我不确定我是否误解了文档，但我想知道何时应该使用自定义相等 function，例如 Lodash 的isEqual ？

我正在使用 Redux 工具包，如果它有什么不同的话。 如果你想测试，这里有一个CodeSandox 。

Answer 1

您应该很少需要为 useSelector 编写自定义相等useSelector 。

大多数useSelector调用应该是一个简单的const item = useSelector(state => state.slice.item) ，或者传入现有的记忆选择器 function ，如const someData = useSelector(selectSomeData) 。

如果您需要传入自定义等式 function，最常见的是从 React-Redux 本身导出的shallowEqual function。

如果您认为需要使用_.isEqual类的深度相等检查，您可能应该暂停并重新考虑您认为需要深度相等检查的原因，因为在 Redux 应用程序中通常不需要这样做。

另外，我认为这里有一点误解。 是的， state.data是 object，但它是对 ZCD69B4957F06CD818DZBFE3D261 中的 object 的引用当你的 reducer 更新时，RTK+Immer 将自动创建一个新的 object 引用，因此oldObject === newObject将是false的，因为两个不同的对象永远不会===彼此。 这就是为什么useSelector在默认情况下已经使用===比较 - 不可变更新意味着比较非常快速和简单。