React 之 记忆化函数cache（十四）

const result = cache（fn）方法：

fn：要对其结果进行缓存的函数。fn 可以接受任何参数并返回任何值。
返回值result : 返回一个与 fn 具有相同类型签名的已缓存版本。在此过程中，它不会调用 fn。

cache 用法

import {cache} from 'react';
import calculateMetrics from 'lib/metrics';

const getMetrics = cache(calculateMetrics);

//当首次使用 data 调用 getMetrics 时，getMetrics 将调用 calculateMetrics(data) 并将结果存储在缓存中
//如果再次使用相同的 data 调用 getMetrics，它将返回缓存的结果，而不会再次调用 calculateMetrics(data)
function Chart({data}) {
  const report = getMetrics(data);
  // ...
}

1.缓存代价昂贵的计算

使用 cache 跳过重复工作

import {cache} from 'react';
import calculateUserMetrics from 'lib/user';

const getUserMetrics = cache(calculateUserMetrics);

function Profile({user}) {
  const metrics = getUserMetrics(user);
  // ...
}

function TeamReport({users}) {
  for (let user in users) {
  	//如果user相同，使用上一次calculateUserMetrics方法计算的缓存，反之调用calculateUserMetrics计算
    const metrics = getUserMetrics(user);
    // ...
  }
  // ...
}

2.不同组件共享数据，预加载数据

要在组件之间共享数据快照，通过缓存长时间运行的数据获取，你可以在渲染组件之前开始异步工作。

//当多个组件进行相同的数据获取时(即多个组件都调用getUser函数)，只会发出一个请求，并且返回的数据会被缓存并在各个组件之间共享
//尽管传递的是相同参数，我的记忆化函数仍在重新运行 
//只要入参id不相同，就不会缓存数据，会调用获取新数据。
const getUser = cache(async (id) => {
  return await db.user.query(id);
}

async function Profile({id}) {
  const user = await getUser(id);
  return (
    <section>
      <img src={user.profilePic} />
      <h2>{user.name}</h2>
    </section>
  );
}

function Page({id}) {
  // ✅ 正确示例：开始获取用户数据。
  getUser(id);
  // ……一些计算工作
  return (
    <>
      <Profile id={id} />
    </>
  );
}