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} /></>);
}