当react-redux中redux存储的非相关部分更新时组件重新渲染

我注意到我的一些组件在我不期望的情况下重新渲染。可以说我有一个<Header />成分。<Header /> calls useSelector，并获取状态的一部分。举个例子，我的整个 redux 存储可能如下所示：

{
  header: "header slice",
  body: "body slice"
}

<Header />使用 use 选择器获取所需内容：

const Header = () => {
  const headerSlice = useSelector(state => state.header);
  return <div>{headerSlice}</div>;
}

在应用程序的其他地方，某些原因导致body切片进行更新。当这种情况发生时，我看到<Header />重新渲染。这不是我所期望的。为什么会发生这种情况？

有关更多详细信息，我可以通过运行 devtools profiler 同时触发更新操作来跟踪此问题state.body。我看到<Header />重新渲染，我的分析器告诉我这是由于“Hooks 4、9、14、19 和 24”发生了变化。

当我在开发工具中查看该组件的钩子时，我发现所有这些钩子似乎都是 Selector -> SyncExternalStoreWithSelector 的一部分：

但这里没有太多信息来告诉我哪个选择器或是哪个选择器、先前的值是什么等等。当我删除这些选择器时，不必要的重新渲染就会停止。但该组件消耗的值不是正在更新的值。我尝试过将组件包装在 React.memo 中，但没有什么区别。我之前使用 redux 时没有遇到过这个问题。通常存储更新只会导致那些组件中的重新渲染useSelect更新的值。

我正在使用 React 18.2.0、redux 4.2.0、react-redux 8.0.2 和 webpack 5。

这里的第一个答案是使用 Redux DevTools 并查看每次调度后 Redux 存储中的状态发生了变化。然后，比较状态变化与该组件选择的值。

下一步是查看该组件文件中的实际选择器。他们中的任何人是否意外地返回了新的引用？一个常见的例子可能是state => state.todos.map() or .filter()或类似的，返回新数组。如果没有记住这些，即使原始数据也将导致不必要的重新渲染didn't change.