如何高效地 select 一个 redux store slice

Question

在 React/Hooks/ReduxToolkit 应用程序中，通过以下两种方法选择 redux 存储的一部分对效率有何影响：

商店结构：

常量存储：RootState = { 学生，培训班， }

students 是由 id 索引的学生字典......即学生：[id: number]: 学生类似地，courses 是由 id

索引的课程字典

在只关心呈现 student 信息的组件中，直接选择组件中的相关切片与创建组件随后调用的记忆化选择器相比，对性能有何影响？

案例一（组件中切片直接选取）：

const StudentReactComponent = () => {
const allStudents = useSelector((state: RootState) => state.students)

...
return some render logic that makes use of `allStudents`
...
}

案例 2（通过记忆选择器选择切片）：

// This memoized selector would actually be imported from a `studentSelectors`
// module instead of being declared above the react component
const selectStudentsDictionary = createSelector((state: RootState) => state.students, students => students)

const StudentReactComponent = () => {
const allStudents = useSelector(selectStudentsDictionary)
...
return some render logic that makes use of `allStudents`
...

Answer 1

useSelector 强制组件在选择器 returns 与先前引用不同的新引用时重新呈现： https://react-redux.js.org/api/hooks#equality-comparisons-and-updates 。因此，正如所写，组件将在 state.students 更改时重新呈现。

这个例子中的“memoized”选择器实际上是没有用的。只有当你有 derived 数据时，记忆才有意义。任何时候你有一个 createSelector 实例只是将 x => x 作为它的“输出选择器”，你使用 createSelector 的方式是错误的，这可能只是一个普通的函数。

作为相关的旁注，我实际上计划在不久的将来为 Redux 核心文档编写一个新的“选择器和记忆”使用指南页面。在那之前，我建议通读我的 post Using Reselect Selectors for Encapsulation and Performance。它已经有几年历史了，但在这里仍然很重要。

如何高效地 select 一个 redux store slice

How to efficiently select a redux store slice

reactjs

redux

reselect

react-hooks

redux-toolkit