本文旨在解决在 React 函数组件中使用 useRef 存储异步请求结果，并避免重复调用 API 的问题。通过 useRef 创建一个缓存，在组件生命周期内仅首次加载时调用 API，后续操作直接从缓存中读取数据，从而提高性能和用户体验。文章将提供详细的代码示例和解释，帮助开发者理解和应用这种优化策略。
在 React 开发中，经常会遇到需要在组件的整个生命周期内保持某些数据不变，并且避免在每次渲染时都重新计算或获取这些数据的情况。一个常见的场景是，从 API 获取数据后，希望将数据缓存起来，以便后续操作直接从缓存中读取，而无需重复调用 API。useRef Hook 提供了一种在函数组件中创建可变引用的方式，可以用来实现这种缓存机制。
使用 useRef 缓存异步请求结果
下面的示例展示了如何使用 useRef 来缓存 API 请求的结果，并在后续操作中直接从缓存中读取数据。
import React, { useState, useEffect, useRef } from 'react';// 假设 getMoviesRequest 是一个异步函数，用于从 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() { // 使用 useRef 创建一个可变引用，用于缓存电影列表 const cachedMoviesFromApi = useRef(null); // 使用 useState 管理当前显示的电影 const [movie, setMovie] = useState({ title: '' }); // useEffect Hook，在组件首次渲染时执行 useEffect(() => { setNewMovie(); // 首次加载时获取并设置电影 }, []); // 异步函数，从缓存或 API 获取电影列表 async function getMoviesFromCacheOrApi() { // 如果缓存中已经存在电影列表，则直接返回 if (cachedMoviesFromApi.current) { return cachedMoviesFromApi.current; } // 否则，从 API 获取电影列表 const moviesFromApi = await getMoviesRequest(); // 将获取到的电影列表存入缓存 cachedMoviesFromApi.current = moviesFromApi; return moviesFromApi; } // 异步函数，设置一个新的电影 async function setNewMovie() { // 从缓存或 API 获取电影列表 const movies = await getMoviesFromCacheOrApi(); // 随机选择一个电影 const randomIndex = getRandomInt(movies.length); const movie = movies[randomIndex]; // 更新 state，触发组件重新渲染 setMovie(movie); } return ( {movie.title}
);}
代码解释
cachedMoviesFromApi = useRef(null): 使用 useRef 创建一个名为 cachedMoviesFromApi 的可变引用。初始值为 null，表示缓存中还没有数据。getMoviesFromCacheOrApi(): 该函数负责从缓存或 API 获取电影列表。首先检查 cachedMoviesFromApi.current 是否有值。如果有值，说明缓存中已经存在电影列表，直接返回缓存中的数据。否则，调用 getMoviesRequest() 从 API 获取数据，并将获取到的数据存入 cachedMoviesFromApi.current，然后返回数据。setNewMovie(): 该函数负责设置一个新的电影。首先调用 getMoviesFromCacheOrApi() 获取电影列表。然后，随机选择一个电影，并使用 setMovie() 更新 state，触发组件重新渲染。useEffect(): 在组件首次渲染时，useEffect Hook 会调用 setNewMovie() 函数，从而触发 API 请求并将结果缓存起来。
注意事项
useRef 返回的是一个对象，其 current 属性才是真正的值。修改 useRef 的 current 属性不会触发组件重新渲染。useRef 的初始值只在组件首次渲染时生效。
总结
通过使用 useRef，我们可以在 React 函数组件中创建一个可变引用，用于缓存异步请求的结果。这种方法可以避免重复调用 API，提高性能和用户体验。在需要缓存数据的场景下，useRef 是一个非常有用的工具。
以上就是在 React 中将 Promise 成功解析的值赋给可变 Ref 对象的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526754.html
微信扫一扫 
支付宝扫一扫 
