跳到主要内容

unstable_autotrackMemoize

使用由Ember Glimmer团队启发的"自动跟踪"方法。它使用一个代理来包装参数，并在首次读取时跟踪对选择器中嵌套字段的访问。后来，当选择器被新的参数调用时，它会识别哪些访问的字段已经改变，并且只有当一个或多个被访问的字段改变时，才重新计算结果。这使得它比lruMemoize中的浅等式检查更精确。

危险

这个API仍然是实验性的，正在进行测试。

设计权衡​

  • 优点：

    • 它可能避免过多的计算，并且比lruMemoize重新计算的次数少，这也可能导致组件重新渲染的次数减少。

  • 缺点：

    • 它只有一个缓存大小。
    • 它比lruMemoize慢，因为它需要做更多的工作。（有多慢取决于选择器中访问的字段数量，调用次数，输入变化的频率等）
    • 它可能有一些意外的行为。因为它跟踪嵌套字段的访问，所以在你不访问一个字段的情况下，它将无法正确地重新计算。例如，一个写得不好的选择器像：
    createSelector([state => state.todos], todos => todos)

    那只是立即返回提取的值，将永远不会更新，因为它看不到任何字段访问来检查。

使用场景​

  • 它可能最适用于你需要访问数据中特定嵌套字段的情况，并且如果同一数据对象中的其他字段不可变地更新，避免重新计算。

参数​

名称描述
func要被记忆的函数。

返回​

一个带有 .clearCache() 方法的记忆函数。

类型参数​

名称描述
Func被记忆的函数的类型。

示例​

使用 unstable_autotrackMemoize 与 createSelector​

unstable_autotrackMemoize/usingWithCreateSelector.ts
import { createSelector, unstable_autotrackMemoize } from 'reselect'

export interface RootState {
  todos: { id: number; completed: boolean }[]
  alerts: { id: number; read: boolean }[]
}

const selectTodoIds = createSelector(
  [(state: RootState) => state.todos],
  todos => todos.map(todo => todo.id),
  { memoize: unstable_autotrackMemoize }
)

使用 unstable_autotrackMemoize 与 createSelectorCreator​

unstable_autotrackMemoize/usingWithCreateSelectorCreator.ts
import { createSelectorCreator, unstable_autotrackMemoize } from 'reselect'
import type { RootState } from './usingWithCreateSelector'

const createSelectorAutotrack = createSelectorCreator({
  memoize: unstable_autotrackMemoize
})

const selectTodoIds = createSelectorAutotrack(
  [(state: RootState) => state.todos],
  todos => todos.map(todo => todo.id)
)