咨询React应用中全局共享API获取对象的最优实现方案

嘿，你的思路很靠谱——用localStorage缓存避免重复API请求确实是优化性能的好办法。下面我给你几个React里实现这种全局数据共享的常用方案，从轻量到进阶都有，你可以根据自己的应用规模选：

1. 自定义Hook（最推荐的轻量方案） #

自定义Hook是React里复用逻辑超好用的方式，你可以把缓存、API请求的逻辑全部封装进去，任何需要rooms数据的组件直接调用这个Hook就行，灵活又不冗余。

先看封装好的Hook代码：

import { useState, useEffect } from 'react';
import axios from 'axios';

export function useRooms() {
  const [rooms, setRooms] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchRooms() {
      try {
        // 先从localStorage取缓存
        const cachedRooms = localStorage.getItem('rooms');
        if (cachedRooms) {
          setRooms(JSON.parse(cachedRooms));
          setLoading(false);
          return;
        }

        // 缓存不存在就请求API
        const response = await axios.get('/api/availablerooms');
        const roomData = response.data;
        setRooms(roomData);
        // 这里要注意：axios.get返回的是Promise，不能直接存，得存响应里的实际数据
        localStorage.setItem('rooms', JSON.stringify(roomData));
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    }

    fetchRooms();
  }, []);

  return { rooms, loading, error };
}

然后在需要的组件里用就很简单：

import { useRooms } from './useRooms';

function RoomList() {
  const { rooms, loading, error } = useRooms();

  if (loading) return <div>加载中...</div>;
  if (error) return <div>出错啦：{error}</div>;

  return (
    <ul>
      {rooms.map(room => (
        <li key={room.id}>{room.name}</li>
      ))}
    </ul>
  );
}

这个方案的好处是无额外依赖、代码简洁，每个组件调用Hook时都会自动复用缓存逻辑，还能轻松处理加载、错误状态，非常适合中小规模的应用。

2. Context API（适合全局状态管理） #

如果你的应用里不止rooms这一个全局数据，或者需要在多层嵌套的组件里访问数据，React官方的Context API是更好的选择。你可以把缓存和请求逻辑放在Context的Provider里，所有被包裹的子组件都能直接获取数据。

先创建Context和Provider：

import { createContext, useContext, useState, useEffect } from 'react';
import axios from 'axios';

const RoomsContext = createContext();

export function RoomsProvider({ children }) {
  const [rooms, setRooms] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchRooms() {
      try {
        const cachedRooms = localStorage.getItem('rooms');
        if (cachedRooms) {
          setRooms(JSON.parse(cachedRooms));
          setLoading(false);
          return;
        }

        const response = await axios.get('/api/availablerooms');
        const roomData = response.data;
        setRooms(roomData);
        localStorage.setItem('rooms', JSON.stringify(roomData));
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    }

    fetchRooms();
  }, []);

  // 把数据和状态传递给所有子组件
  const value = { rooms, loading, error };

  return (
    <RoomsContext.Provider value={value}>
      {children}
    </RoomsContext.Provider>
  );
}

// 用自定义Hook简化Context的访问
export function useRooms() {
  return useContext(RoomsContext);
}

然后在App根组件里包裹Provider：

import { RoomsProvider } from './RoomsContext';

function App() {
  return (
    <RoomsProvider>
      {/* 这里放你的所有组件 */}
      <RoomList />
      <RoomBookingForm />
    </RoomsProvider>
  );
}

之后任何组件都可以用useRooms()获取数据，用法和之前的Hook完全一样。这个方案适合需要全局状态管理的场景，比如以后你需要更新rooms数据（比如新增房间后刷新缓存），可以在Provider里统一处理，所有用到数据的组件都会自动更新。

几个重要的注意点 #

• 你之前的代码有个小坑：axios.get返回的是Promise对象，不能直接存在localStorage里，必须等请求完成后存response.data，不然localStorage里存的是Promise的字符串形式，根本没法用。
• 可以给缓存加个过期时间，比如存的时候同时记录一个timestamp，下次取的时候判断是否过期，避免缓存太久导致数据过时。
• 如果用Context，记得不要在Provider包裹范围外的组件调用useRooms()，会报错哦。

总结一下：如果只是单纯复用rooms的获取逻辑，自定义Hook就足够了；如果需要全局状态管理或者多个数据共享，Context API是更合适的选择。

内容的提问来源于stack exchange，提问作者ca8msm