本文旨在解决在 React 函数组件中使用 useRef 存储异步 API 请求结果，并避免每次渲染都重新发起请求的问题。我们将探讨如何利用 useRef 结合 async/await，有效地缓存 API 数据，提升应用性能，并提供详细的代码示例和注意事项。
在 React 应用中，我们经常需要从 API 获取数据并在组件中使用。为了避免不必要的 API 调用，我们希望在组件的生命周期内缓存 API 响应。useRef hook 提供了一种在组件重新渲染之间保持可变值的方式，非常适合用来缓存数据。然而，直接将 Promise 的结果赋值给 useRef 对象可能不会立即生效，导致访问到未更新的值。本文将介绍如何正确地使用 useRef 结合 async/await 来解决这个问题。
使用 useRef 缓存 API 数据
核心思路是创建一个函数，该函数首先检查 useRef 对象是否已经包含缓存的数据。如果存在，则直接返回缓存的数据；否则，调用 API 获取数据，将其存储到 useRef 对象中，并返回。
以下是一个具体的实现示例：
import React, { useState, useEffect, useRef } from 'react';
// 假设的 API 请求函数
async function getMoviesRequest() {
// 模拟 API 请求延迟
await new Promise(resolve => setTimeout(resolve, 500));
// 模拟返回电影数据
return [
{ title: "Movie 1" },
{ title: "Movie 2" },
{ title: "Movie 3" },
{ title: "Movie 4" },
{ title: "Movie 5" },
{ title: "Movie 6" },
{ title: "Movie 7" },
{ title: "Movie 8" },
{ title: "Movie 9" },
{ title: "Movie 10" }
];
}
// 随机数生成函数
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
export default function Page() {
const cachedMoviesFromApi = useRef(null); // 初始化为 null
const [movie, setMovie] = useState({ title: "" });
useEffect(() => {
setNewMovie().then(); // 确保在组件挂载后立即获取电影数据
}, []);
async function getMoviesFromCacheOrApi() {
if (cachedMoviesFromApi.current) {
console.log("从缓存中获取电影");
return cachedMoviesFromApi.current;
}
console.log("从 API 获取电影");
const moviesFromApi = await getMoviesRequest();
cachedMoviesFromApi.current = moviesFromApi;
return moviesFromApi;
}
async function setNewMovie() {
const movies = await getMoviesFromCacheOrApi();
const randomIndex = getRandomInt(9);
const movie = movies[randomIndex];
setMovie(movie);
}
return (
<div>
<h3>{movie.title}</h3>
<button onClick={setNewMovie}>Generate New Movie</button>
</div>
);
}代码解释：
- cachedMoviesFromApi: 使用 useRef(null) 创建一个 ref 对象，用于存储从 API 获取的电影数据。初始值为 null，表示尚未从 API 获取数据。
-
getMoviesFromCacheOrApi: 这是一个异步函数，负责从缓存或 API 获取电影数据。
- 首先检查 cachedMoviesFromApi.current 是否有值。如果有，则直接返回缓存的数据。
- 如果缓存中没有数据，则调用 getMoviesRequest 函数从 API 获取数据。
- 将获取到的数据赋值给 cachedMoviesFromApi.current，以便下次使用。
- 最后返回从 API 获取的数据。
-
setNewMovie: 这是一个异步函数，负责设置新的电影。
- 调用 getMoviesFromCacheOrApi 函数获取电影数据（从缓存或 API）。
- 随机选择一个电影。
- 使用 setMovie 函数更新 movie state。
- useEffect: 在组件挂载后，调用 setNewMovie 函数，确保在组件加载时获取初始电影数据。
关键点：
- async/await: 使用 async/await 确保 API 请求完成后再执行后续操作，避免访问到未定义的 movies 值。
- null 初始化: cachedMoviesFromApi 初始化为 null，可以明确区分 "尚未加载" 和 "已加载，但数据为空" 的情况。 如果API可能返回空数组，则需要根据实际情况选择合适的初始值。
- useEffect: 在 useEffect 中调用 setNewMovie().then() 确保异步操作完成。
注意事项
- 错误处理: 在实际应用中，应该添加错误处理机制，例如使用 try...catch 块来捕获 API 请求可能发生的错误。
- 缓存失效: 可以考虑添加缓存失效机制，例如设置一个缓存时间，定期从 API 重新获取数据。
- 数据更新: 如果 API 数据会发生变化，需要考虑如何更新缓存。例如，可以添加一个 "刷新" 按钮，点击后强制从 API 重新获取数据。
总结
通过使用 useRef 结合 async/await，我们可以在 React 函数组件中有效地缓存 API 数据，避免不必要的 API 调用，提升应用性能。关键在于确保在访问 useRef 对象之前，API 请求已经完成，并且正确处理可能出现的错误。
