关于useSelector相等性检查

Question

我对redux useSelector相等性检查有疑问。

请参阅React Redux Hook文档（https://react-redux.js.org/api/hooks#equality-comparisons-and-updates）

useSelector将与返回值和前一个值进行参考比较，如果结果看起来不同，则强制重新渲染

我具有这样的默认博客存储状态

searcherParam: {
  keyword: '',
  categories: [],
  tags: [],
},

在组件中，我使用useSelector检索值

const searchParam = useSelector(state => state.Blog.searcherParam)

如果我调度一个动作来更新具有相同值的searcherParam，则该组件将重新呈现，因为返回值是对象（浅比较）

所以我通过多次调用useSelector来检索值

const keyword = useSelector(state => state.Blog.searchrParam.keyword)
const categories = useSelector(state => state.Blog.searchrParam.categories)
const tags = useSelector(state => state.Blog.searchrParam.tags)

并且我调度了一个动作来再次用相同的值更新searcherParam

该组件将不会重新渲染

我不明白的是为什么组件不重新渲染？

如果useSelector进行引用比较，则类别值（数组）不应与相同的引用以及分派后的标记相同

我有什么误会吗？谢谢

Answer 1

所以当您这样做时：

const newKeyword = useSelector(state => state.Blog.searchrParam.keyword)
const newCategories = useSelector(state => state.Blog.searchrParam.categories)
const newTags = useSelector(state => state.Blog.searchrParam.tags)

这只是意味着，您将希望拥有它们各自的最新价值。

它不翻译为：

searcherParam: {
  keyword: newKeyword,
  categories: newCategories,
  tags: newTags,
},

因为searcherParam将始终是分派操作时的新引用。

如果您只想重新渲染，则3个属性中的任何一个都发生了更改，那么您就可以简单地获取state.searcherParam并进行分派并实现重新渲染。

仅当您要更改keyword时才重新渲染时，获取单个属性会有所帮助。当cateogories或tags中的任何一个更改时，您都不想重新渲染。

在这种情况下，请注意，如果您仅获取searcherParam，它不会在意3个属性中的哪个已更改，因为它是一个新引用，所以您将获得重新渲染。

这就是文档所提到的。