本文旨在解决在 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 ( {movie.title}
);}
代码解释：
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 请求已经完成，并且正确处理可能出现的错误。
以上就是在 React 中将 Promise 成功解析后的值赋给可变 ref 对象的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526984.html
微信扫一扫 
支付宝扫一扫 
