创建记忆值的选择器差异

Question

我有以下问题，在代码中我发现很多地方 createSelector 没有正确实现，我想更改它以提高前端的性能。

本来代码是这样的

export const foundingListSelector= createSelector(
  (state: RootState) => state.procedureParameters.currentProcedureParameterDTO?.foundingList,
  (foundingList) => foundingList
)

这显然是错误的，因为它没有被记住。我还想指出 procedureParameters 很大......也许这就是为什么一切都如此滞后的原因。

我无法在以下实现之间做出决定。哪一个更好，它们有什么区别（如果有的话）。

我可以把它放在[]里吗

(1)

export const foundingListSelector= createSelector(
  [(state: RootState) => state.procedureParameters.currentProcedureParameterDTO?.foundingList],
  (foundingList) => foundingList
)

然后还有这个

(2)

export const foundingListSelector= createSelector(
  [(state: RootState) => state] ,
  (state ) => state.procedureParameters.currentProcedureParameterDTO?.foundingList
)

我可能是错的，但我认为 (2) 会记住 RootState ，这也很糟糕，因为里面有很多东西，当那里发生一些变化以重新运行选择器时，它会不理想。

Answer 1

export const foundingListSelector= createSelector(
  [(state: RootState) => state.procedureParameters.currentProcedureParameterDTO?.foundingList],
  (foundingList) => foundingList
)

(1) 在功能上等同于您尝试修复的当前代码。

createSelector

有两种“语法”。第一个是除了最后一个参数之外的所有参数都被视为输入选择器函数，最后一个参数是被记忆的结果函数。第二个是第一个参数是输入选择器数组，第二个参数是记忆的结果函数。

export const foundingListSelector= createSelector(
  [(state: RootState) => state] ,
  (state ) => state.procedureParameters.currentProcedureParameterDTO?.foundingList
)

（2）在技术上是正确的，但正如您所指出的，可能会因为选择太多而遇到困难。但它并没有记住根状态，这只是输入，结果函数的返回值就是被记忆的值。这里的问题是，任何时候根状态更新（很可能是很多（!!）），结果函数都会重新计算其值。在这里，这似乎并不是什么大问题，因为您只是选择并返回一些嵌套状态，但是您可以想象这样一个场景：您正在迭代一个大型数组或对象，并进行一些“计算成本昂贵”的调用，该调用需要某个时间。如果没有必要，您不想更频繁地运行此操作。 我认为通常您不希望为您正在使用的任何对象选择超过 1 个或 2 个深度级别。我的建议是将这个单个选择器函数拆分为多个选择器，每个选择器选择或计算并记忆单个值。

示例：

// root procedureParameters selector
export const selectProcedureParameters =
  (state: RootState) => state.procedureParameters;

export const selectCurrentProcedureParameterDTO = createSelector(
  [selectProcedureParameters],
  (procedureParameters) => procedureParameters.currentProcedureParameterDTO,
);

export const selectFoundingList = createSelector(
  [selectCurrentProcedureParameterDTO] ,
  (currentProcedureParameterDTO) => currentProcedureParameterDTO?.foundingList
)

现在，

selectCurrentProcedureParameterDTO

选择器函数仅在

state.procedureParameters

更新时重新计算，而

selectFoundingList

仅在

selectCurrentProcedureParameterDTO

选择器重新计算并记忆更新值时重新计算。根

state

可以围绕这些状态/选择器更新任意多次，并且不受影响。