上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useMemoize

Tags:
Utilities

一个 React 钩子，其返回一个函数，该函数对值进行缓存（对于相同的参数返回相同的缓存值）。

演示

尝试多次点击以获取数据，您将看到第一次获取将实际获取数据，但其余的将返回缓存值。

源码

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const cachedFn = useMemoize(fnToBeCached, options)

被缓存函数 FnToBeCached

将要被缓存的函数。

选项 Options

export type UseMemoizeCache<Key, Value> = {
  get: (key: Key) => Value | undefined
  set: (key: Key, value: Value) => void
  has: (key: Key) => boolean
  delete: (key: Key) => void
  clear(): void
}

export type UseMemoizeOptions<Result, Args extends unknown[]> = {
  /**
   * 自定义缓存键生成器
   *
   * @defaultValue JSON.stringify(args)
   */
  getKey?: (...args: Args) => string | number
  /**
   * 自定义缓存，可以是 Map 或其他实现了缓存接口的对象
   *
   * @defaultValue new Map()
   */
  cache?: UseMemoizeCache<CacheKey, Result>
}

返回值

export type UseMemoizeReturns<Result, Args extends unknown[]> = {
  /**
   * 记忆化函数
   */
  (...args: Args): Result
  /**
   * 加载数据并用新值替换缓存
   */
  load: (...args: Args) => Result
  /**
   * 通过参数删除缓存
   */
  delete: (...args: Args) => void
  /**
   * 清除所有缓存
   */
  clear(): void
  /**
   * 通过参数获取缓存键
   */
  getKey: (...args: Args) => CacheKey
  /**
   * 类似于 Map 的缓存对象，您可以直接操作缓存
   */
  cache: UseMemoizeCache<CacheKey, Result>
}