reactjs - useSelector 解构与多次调用

Question

最近我一直在阅读react-redux文档https://react-redux.js.org/next/api/hooks还有一个与平等比较和更新相关的部分，内容如下:

Call useSelector() multiple times, with each call returning a single field value.

第一种方法:

const { open, importId, importProgress } = useSelector((importApp) => importApp.productsImport);

第二种方法:

const open = useSelector((importApp) => importApp.productsImport.open);
const importId = useSelector((importApp) => importApp.productsImport.importId );
const importProgress = useSelector((importApp) => importApp.productsImport.importProgress);

那么有什么真正的区别吗？或者由于解构 useSelector 钩子(Hook)在检查引用时会遇到麻烦？

Answer 1

只是为了奠定基础:在分派(dispatch)操作时，将调用您传递给 useSelector() 的选择器。如果它返回的值与上次调度操作时返回的值不同，则组件将重新渲染。

破坏确实是错误的方法，但这里的最佳答案完全无关。文档提到了选择器每次都创建一个新对象的场景，就像您在 mapStateToProps() 函数中所做的那样。这将导致组件在每次分派(dispatch)操作时重新渲染，无论该操作执行什么操作，因为从技术上讲，选择器返回的值是内存中的不同对象，即使实际数据没有更改。 在这种情况下，您需要担心严格相等和浅层相等比较。但是，您的选择器并不是每次都创建一个新对象。如果分派(dispatch)的操作不修改 importApp.productsImport，它将是内存中与以前完全相同的对象，从而使所有这些都变得毫无意义。

相反，这里的问题是，当您实际上只关心该切片的一些特定属性时，您正在选择整个状态切片。考虑一下，除了 open、importId 和 importProgress 之外，importApp.productsImport 可能还具有其他属性。如果这些其他属性发生变化，那么您的组件将不必要地重新渲染，即使它没有引用它们。原因很简单:选择器返回 importApp.productsImport，并且该对象发生了变化。 Redux 无法知道 open、importId 和 importProgress 是您真正关心的唯一属性，因为您没有”选择这些属性；您选择了整个对象。

解决方案

因此，要选择多个属性而不需要不必要的重新渲染，您有两个选择:

• 使用多个 useSelector() Hook ，每个 Hook 选择您商店中的一个属性。
• 拥有一个 useSelector() Hook 和一个选择器，将商店中的多个属性组合到一个对象中。你可以通过以下方式做到这一点:
  • 使用 reselect 中的内存选择器.
  • 只需编写一个函数，根据 state 的特定属性创建一个新对象并返回它。如果您这样做，那么您将不得不担心严格相等和浅层相等比较。

出于这个目的，我觉得多个 useSelector() Hook 实际上是可行的方法。文档特别提到

Each call to useSelector() creates an individual subscription to the Redux store.

但我认为，与纯粹出于这个原因的单个调用相比，多个调用实际上是否会真正带来真正的性能损失，还有待观察，在我看来，担心这一点可能是过度优化，除非你有一个拥有数百或数千个订阅的庞大应用程序。如果您使用单个 useSelector() 钩子(Hook)，那么此时您基本上只是编写一个 mapStateToProps 函数，我觉得这会削弱使用的很多吸引力首先是钩子(Hook)，特别是如果您正在编写 TypeScript。如果您然后想要解构结果，那就会变得更加麻烦。我还认为使用多个钩子(Hook)绝对更符合 Hooks API 的一般精神。