优化React组件中的API数据获取
在react应用开发中，从外部api获取数据是常见需求。然而，不当的数据获取策略可能导致重复的api请求，从而降低应用性能并增加服务器负载。例如，在一个随机电影生成器应用中，每次点击按钮都重新调用api获取电影列表，然后从中选择一部，这显然是低效的。
最初的实现可能如下所示，每次生成新电影时都会触发API调用：
import React, { useState, useEffect } from 'react';
interface Movie {
title: string;
}
// 模拟API请求
async function getMoviesRequest(): Promise {
console.log('Calling API to get movies...');
return new Promise(resolve => {
setTimeout(() => {
resolve([
{ title: "The Shawshank Redemption" },
{ title: "The Godfather" },
{ title: "The Dark Knight" },
{ title: "Pulp Fiction" },
{ title: "Forrest Gump" },
{ title: "Inception" },
{ title: "The Matrix" },
{ title: "Interstellar" },
{ title: "Parasite" },
{ title: "Whiplash" }
]);
}, 1000); // 模拟网络延迟
});
}
function getRandomInt(max: number): number {
return Math.floor(Math.random() * max);
}
export default function Page() {
const [movie, setMovie] = useState({
title: ""
});
useEffect(() => {
setNewMovie();
}, []);
function setNewMovie() {
getMoviesRequest().then((newMovies) => {
const randomIndex = getRandomInt(9);
const movie = newMovies[randomIndex];
setMovie(movie);
});
}
return (
{movie.title}
);
} 上述代码的问题在于，每次点击“Generate New Movie”按钮时，都会重新调用getMoviesRequest()，导致不必要的网络请求。为了优化这一点，我们希望只在组件首次加载时调用一次API，并将获取到的电影列表缓存起来，供后续操作使用。
useRef与异步操作的挑战
为了缓存数据，一个常见的想法是使用useRef，因为它可以在组件的整个生命周期内持久化一个可变值，并且其值的改变不会触发组件重新渲染。然而，直接将Promise的解析值赋给useRef并在同一渲染周期内尝试访问，可能会遇到异步操作带来的挑战。
考虑以下尝试缓存电影列表的代码：
import React, { useState, useEffect, useRef } from 'react';
// ... (Movie interface, getMoviesRequest, getRandomInt 保持不变)
export default function Page() {
const movies = useRef([]); // 尝试用useRef缓存电影列表
const [movie, setMovie] = useState({
title: ""
});
useEffect(() => {
setNewMovies(); // 调用API获取电影并存入ref
setNewMovie(); // 尝试从ref中获取电影并设置
}, []);
function setNewMovies() {
getMoviesRequest().then((newMovies) => {
movies.current = newMovies; // 在Promise解析后更新ref
});
}
function setNewMovie() {
// 此时 movies.current 可能仍然是空数组，因为 setNewMovies 是异步的
const randomIndex = getRandomInt(9);
const movie = movies.current[randomIndex]; // 访问时可能数据未更新
setMovie(movie);
}
return (
{movie.title}
);
} 这段代码的问题在于setNewMovies()是一个异步函数（因为它内部调用了getMoviesRequest().then(...)），而setNewMovie()紧随其后同步执行。当setNewMovie()被调用时，setNewMovies()中的Promise可能尚未解析，导致movies.current仍然是其初始值（空数组），从而无法正确获取电影。
解决方案：useRef结合async/await实现数据缓存
要解决上述异步时序问题，我们需要确保在尝试使用缓存数据之前，数据已经被成功获取并存储。这可以通过将数据获取和缓存逻辑封装在一个async函数中，并利用await关键字等待异步操作完成来实现。
核心思路是创建一个getMoviesFromCacheOrApi函数，它首先检查useRef中是否已有缓存数据。如果存在，则直接返回缓存数据；如果不存在，则发起API请求，将结果存入useRef，然后返回。
以下是优化后的实现：
import React, { useState, useEffect, useRef } from 'react';
interface Movie {
title: string;
}
// 模拟API请求
async function getMoviesRequest(): Promise {
console.log('Calling API to get movies...');
return new Promise(resolve => {
setTimeout(() => {
resolve([
{ title: "The Shawshank Redemption" },
{ title: "The Godfather" },
{ title: "The Dark Knight" },
{ title: "Pulp Fiction" },
{ title: "Forrest Gump" },
{ title: "Inception" },
{ title: "The Matrix" },
{ title: "Interstellar" },
{ title: "Parasite" },
{ title: "Whiplash" }
]);
}, 1000); // 模拟网络延迟
});
}
function getRandomInt(max: number): number {
return Math.floor(Math.random() * max);
}
export default function Page() {
// 使用 useRef 缓存电影列表，初始值为 null 表示尚未加载
const cachedMoviesFromApi = useRef(null);
const [movie, setMovie] = useState({
title: ""
});
useEffect(() => {
// 组件首次加载时，调用 setNewMovie 来获取并设置第一部电影
// setNewMovie 是 async 函数，所以这里也需要 await 或者 .then()
setNewMovie().then();
}, []);
/**
* 异步函数：从缓存或API获取电影列表
* @returns {Promise} 电影列表
*/
async function getMoviesFromCacheOrApi(): Promise {
// 检查缓存中是否已有数据
if (cachedMoviesFromApi.current) {
console.log('Returning movies from cache.');
return cachedMoviesFromApi.current;
}
// 如果缓存中没有，则调用API获取数据
console.log('Fetching movies from API...');
const moviesFromApi = await getMoviesRequest();
// 将获取到的数据存入 useRef 进行缓存
cachedMoviesFromApi.current = moviesFromApi;
return moviesFromApi;
}
/**
* 异步函数：设置一部新的随机电影
*/
async function setNewMovie() {
// 等待电影列表获取完成（可能来自缓存，也可能来自API）
const movies = await getMoviesFromCacheOrApi();
// 确保电影列表不为空，避免因API返回空数组导致错误
if (!movies || movies.length === 0) {
console.warn("No movies available to select.");
setMovie({ title: "No movies found" });
return;
}
const randomIndex = getRandomInt(movies.length); // 根据实际电影数量生成索引
const selectedMovie = movies[randomIndex];
setMovie(selectedMovie);
}
return (
{movie.title}
);
} 代码详解
-
cachedMoviesFromApi = useRef
(null) :- 我们使用useRef来创建一个可变的引用对象，其.current属性将用于存储电影列表。
- 类型定义为Movie[] | null，初始值设为null，明确表示在API数据尚未加载时，引用是空的。这比空数组更清晰，因为API可能返回一个空数组，而null明确表示“未加载”。
-
getMoviesFromCacheOrApi() 函数:
- 这是一个async函数，允许我们使用await关键字。
- 它首先检查cachedMoviesFromApi.current是否非空。如果为真，说明数据已经缓存，直接返回。
- 如果为null，则调用getMoviesRequest()（这是一个异步操作），并使用await等待其完成。
- 一旦API请求完成，将返回的电影列表赋给cachedMoviesFromApi.current，从而实现缓存。
- 最后返回获取到的电影列表。
-
setNewMovie() 函数:
- 同样是一个async函数。
- 它通过await getMoviesFromCacheOrApi()来获取电影列表。这确保了在尝试从movies数组中选择电影之前，movies变量已经包含了从缓存或API获取到的数据。
- 在获取到电影列表后，它会检查列表是否为空，然后从中随机选择一部电影并更新movie状态。
-
useEffect 钩子:
- 在组件首次渲染后，useEffect会调用setNewMovie().then()来初始化电影显示。由于setNewMovie是async函数，它返回一个Promise，所以我们需要.then()来处理它（或者直接在useEffect回调函数前加上async，但React官方不推荐直接将useEffect的回调函数声明为async，因为清理函数会变得复杂）。
注意事项与最佳实践
-
useRef与useState的选择:
- useRef适用于存储不需要触发组件重新渲染的、在组件生命周期内保持不变或仅在内部逻辑中改变的数据（如计时器ID、DOM元素引用、缓存数据）。
- useState适用于存储会影响UI渲染的数据，其改变会触发组件重新渲染。
- 在这个例子中，电影列表本身被缓存，其改变不直接触发UI更新；只有从列表中选出的单部电影(movie状态)的改变才触发UI更新。
-
async/await的重要性:
- async/await是处理Promise的语法糖，它使得异步代码看起来像同步代码，极大地提高了可读性和维护性。
- 在需要等待一个异步操作完成后再执行后续操作的场景中，async/await是理想选择。
-
初始值设置:
- 将useRef的初始值设置为null（或undefined）是良好的实践，它明确表示数据尚未加载。如果设置为一个空数组[]，在某些情况下可能难以区分是API返回了空数组还是数据尚未加载。
-
错误处理:
- 在实际应用中，getMoviesRequest()可能会失败（网络错误、服务器错误等）。为了健壮性，您应该在getMoviesFromCacheOrApi和setNewMovie函数中添加try...catch块来处理API请求可能抛出的错误。
-
缓存策略:
- 此方案实现的是一种简单的内存缓存，数据只在当前组件实例的生命周期内有效。如果用户刷新页面或组件被卸载后重新挂载，缓存将丢失。
- 对于更复杂的缓存需求（如跨组件、跨页面甚至持久化缓存），可能需要结合Context API、Redux等状态管理库，或者使用Service Worker、LocalStorage等技术。
总结
通过巧妙地结合useRef和async/await，我们成功地实现了一个高效的API数据缓存机制。这不仅减少了不必要的网络请求，提升了应用性能，还优化了用户体验。理解useRef的特性以及async/await在处理异步流中的作用，是构建高性能React应用的关键。
