本文旨在探讨在React组件中如何高效地管理外部API数据，避免不必要的重复请求。通过结合使用useRef进行数据缓存和async/await处理异步操作，我们可以确保API只在必要时被调用一次，并在组件生命周期内复用已获取的数据，从而显著提升应用性能和用户体验。文章将详细阐述这一优化策略的实现细节和注意事项。
优化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应用的关键。
以上就是React中利用useRef和async/await优化API数据缓存与管理的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527033.html
微信扫一扫 
支付宝扫一扫 
