React中利用useRef和async/await优化API数据缓存与管理

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

React中利用useRef和async/await优化API数据缓存与管理

2025-10-06

浏览次数：次

返回列表

React中利用useRef和async/await优化API数据缓存与管理

本文旨在探讨在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<Movie[]> {
  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<Movie>({
    title: ""
  });

  useEffect(() => {
    setNewMovie();
  }, []);

  function setNewMovie() {
    getMoviesRequest().then((newMovies) => {
      const randomIndex = getRandomInt(9);
      const movie = newMovies[randomIndex];
      setMovie(movie);
    });
  }

  return (
    <div>
      <h3>
        {movie.title}
      </h3>
      <button onClick={setNewMovie}>
        Generate New Movie
      </button>
    </div>
  );
}

上述代码的问题在于，每次点击“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<Movie[]>([]); // 尝试用useRef缓存电影列表
  const [movie, setMovie] = useState<Movie>({
    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 (
    <div>
      <h3>
        {movie.title}
      </h3>
      <button onClick={setNewMovie}>
        Generate New Movie
      </button>
    </div>
  );
}

这段代码的问题在于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<Movie[]> {
  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<Movie[] | null>(null);
  const [movie, setMovie] = useState<Movie>({
    title: ""
  });

  useEffect(() => {
    // 组件首次加载时，调用 setNewMovie 来获取并设置第一部电影
    // setNewMovie 是 async 函数，所以这里也需要 await 或者 .then()
    setNewMovie().then(); 
  }, []);

  /**
   * 异步函数：从缓存或API获取电影列表
   * @returns {Promise<Movie[]>} 电影列表
   */
  async function getMoviesFromCacheOrApi(): Promise<Movie[]> {
    // 检查缓存中是否已有数据
    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 *ailable to select.");
      setMovie({ title: "No movies found" });
      return;
    }

    const randomIndex = getRandomInt(movies.length); // 根据实际电影数量生成索引
    const selectedMovie = movies[randomIndex];
    setMovie(selectedMovie);
  }

  return (
    <div>
      <h3>
        {movie.title}
      </h3>
      <button onClick={setNewMovie}>
        Generate New Movie
      </button>
    </div>
  );
}

代码详解

cachedMoviesFromApi = useRef(null):
- 我们使用useRef来创建一个可变的引用对象，其.current属性将用于存储电影列表。
- 类型定义为Movie[] | null，初始值设为null，明确表示在API数据尚未加载时，引用是空的。这比空数组更清晰，因为API可能返回一个空数组，而null明确表示“未加载”。
getMoviesFromCacheOrApi() 函数:
UXbot
AI产品设计工具
185 查看详情
- 这是一个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等技术。