React在上下文中传递缓存和get/set函数

import React, { createContext, useState, useContext } from 'react';

// 创建一个上下文
const CacheContext = createContext();

// 创建一个提供缓存和get/set函数的组件
const CacheProvider = ({ children }) => {
  const [cache, setCache] = useState({});

  // 定义get函数，用于从缓存中读取数据
  const get = (key) => {
    return cache[key];
  };

  // 定义set函数，用于向缓存中写入数据
  const set = (key, value) => {
    setCache((prevCache) => ({
      ...prevCache,
      [key]: value,
    }));
  };

  return (
    <CacheContext.Provider value={{ cache, get, set }}>
      {children}
    </CacheContext.Provider>
  );
};

// 使用上下文中的缓存和get/set函数的组件
const ExampleComponent = () => {
  const { cache, get, set } = useContext(CacheContext);

  // 从缓存中读取数据
  const cachedData = get('cachedData');

  // 更新缓存中的数据
  set('cachedData', 'Hello, World!');

  return (
    <div>
      <p>Cached Data: {cachedData}</p>
    </div>
  );
};

// 在应用程序中使用CacheProvider包裹需要使用上下文的组件
const App = () => {
  return (
    <CacheProvider>
      <ExampleComponent />
    </CacheProvider>
  );
};

export default App;