在 React 中将 Promise 成功解析的值赋给可变 Ref 对象-js教程-PHP中文网

在 react 中将 promise 成功解析的值赋给可变 ref 对象

本文旨在解决在 React 函数组件中使用 useRef 存储异步请求结果，并避免重复调用 API 的问题。通过 useRef 创建一个缓存，在组件生命周期内仅首次加载时调用 API，后续操作直接从缓存中读取数据，从而提高性能和用户体验。文章将提供详细的代码示例和解释，帮助开发者理解和应用这种优化策略。

在 React 开发中，经常会遇到需要在组件的整个生命周期内保持某些数据不变，并且避免在每次渲染时都重新计算或获取这些数据的情况。一个常见的场景是，从 API 获取数据后，希望将数据缓存起来，以便后续操作直接从缓存中读取，而无需重复调用 API。useRef Hook 提供了一种在函数组件中创建可变引用的方式，可以用来实现这种缓存机制。

使用 useRef 缓存异步请求结果

下面的示例展示了如何使用 useRef 来缓存 API 请求的结果，并在后续操作中直接从缓存中读取数据。

ApiPost接口调试与文档生成工具

ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

下载

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 (
    <div>
      <h3>{movie.title}</h3>
      <button onclick="{setNewMovie}">Generate New Movie</button>
    </div>
  );
}

代码解释

cachedMoviesFromApi = useRef(null): 使用 useRef 创建一个名为 cachedMoviesFromApi 的可变引用。初始值为 null，表示缓存中还没有数据。
getMoviesFromCacheOrApi(): 该函数负责从缓存或 API 获取电影列表。首先检查 cachedMoviesFromApi.current 是否有值。如果有值，说明缓存中已经存在电影列表，直接返回缓存中的数据。否则，调用 getMoviesRequest() 从 API 获取数据，并将获取到的数据存入 cachedMoviesFromApi.current，然后返回数据。
setNewMovie(): 该函数负责设置一个新的电影。首先调用 getMoviesFromCacheOrApi() 获取电影列表。然后，随机选择一个电影，并使用 setMovie() 更新 state，触发组件重新渲染。
useEffect(): 在组件首次渲染时，useEffect Hook 会调用 setNewMovie() 函数，从而触发 API 请求并将结果缓存起来。

注意事项