React中利用useRef和async/await优化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>
  );
}

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>
  );
}

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 available 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>
  );
}