React 缓存客户端

一、作用

二、导出的常量

1. 缓存

备注

• noopCache() 由 ReactCacheImpl#cache 实现

export const cache: typeof noopCache = disableClientCache
  ? noopCache
  : cacheImpl;

2. 缓存标志

备注

• noopCacheSignal() 由 ReactCacheImpl#cacheSignal 实现

export const cacheSignal: () => null | AbortSignal = disableClientCache
  ? noopCacheSignal
  : cacheSignalImpl;

三、工具

1. 无操作缓存

// function noopCache<A: Iterable<mixed>, T>(fn: (...A) => T): (...A) => T {
function noopCache<A extends Iterable<mixed>, T>(
  fn: (...a: A) => T,
): (...a: A) => T {
  // On the client (i.e. not a Server Components environment) `cache` has
  // no caching behavior. We just return the function as-is.
  // 在客户端（即非服务器组件环境）中，`cache` 没有缓存行为。我们只是原样返回该函数。
  //
  // We intend to implement client caching in a future major release. In the
  // meantime, it's only exposed as an API so that Shared Components can use
  // per-request caching on the server without breaking on the client. But it
  // does mean they need to be aware of the behavioral difference.
  //
  // 我们打算在未来的一个重大版本中实现客户端缓存。与此同时，它仅作为 API 提供，以便共享组件
  // 可以在服务器上使用每请求缓存，而不会在客户端出现问题。但这也意味着它们需要注意行为上的差异。
  //
  // The rest of the behavior is the same as the server implementation — it
  // returns a new reference, extra properties like `displayName` are not
  // preserved, the length of the new function is 0, etc. That way apps can't
  // accidentally depend on those details.
  //
  // 其余行为与服务器实现相同 —— 它会返回一个新的引用，像 `displayName` 这样的额外属性
  // 不会被保留，新函数的长度为 0 等等。这样应用程序就不会意外依赖这些细节。
  return function () {
    return fn.apply(null, arguments);
  };
}

2. 无操作缓存信号

function noopCacheSignal(): null | AbortSignal {
  return null;
}