在 React 中快取資料可以透過減少多次獲取相同資料的需要來顯著提高效能和使用者體驗。以下是React中實作資料快取的幾種方法：

1. 使用狀態管理庫

• Redux：使用 Redux 將您的資料儲存在集中儲存中。您可以在 Redux 狀態下快取 API 回應，並且僅在資料不可用時才取得資料。
• React Query：此程式庫為伺服器狀態提供內建快取機制。它會自動快取 API 回應並根據需要重新取得它們。
• Recoil：與 Redux 類似，Recoil 允許你管理全域狀態，並且可以使用選擇器實作快取策略。

2. 本地儲存或會話儲存

您可以將資料快取在瀏覽器的本機儲存或會話儲存中：

const fetchData = async () => {
    const cachedData = localStorage.getItem('myData');
    if (cachedData) {
        return JSON.parse(cachedData);
    }

    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    localStorage.setItem('myData', JSON.stringify(data));
    return data;
};

// Use it in your component
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData();
        setData(data);
    };
    loadData();
}, []);

3. 自訂緩存邏輯

您可以使用 JavaScript 物件實作自己的快取機制，以基於唯一鍵儲存資料：

const cache = {};

const fetchData = async (key) => {
    if (cache[key]) {
        return cache[key];
    }

    const response = await fetch(`https://api.example.com/data/${key}`);
    const data = await response.json();
    cache[key] = data; // Cache the data
    return data;
};

// Use it in your component
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData('myKey');
        setData(data);
    };
    loadData();
}, []);

4. 服務人員

對於更高級的緩存，您可以使用服務工作人員快取 API 回應並直接從快取中提供服務。

5. 使用 useMemo 或 useCallback 進行記憶化

如果您正在處理從獲取的數據派生的計算數據，請使用 useMemo 來記憶值：

const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);

結論

考慮資料新鮮度、複雜性和使用者體驗等因素，選擇最適合您的應用程式需求的快取策略。像 React Query 這樣的庫可以簡化快取和資料獲取，而手動方法可以為您提供更多控制。