在 ReactJS 中存储单个缓存数据

在 ReactJS 中存储单个缓存数据通常会使用 React 的 useMemo 和 useState 钩子。下面是一个简单的示例：

import React, { useMemo, useState } from 'react';

function App() {
  const [data, setData] = useState([]);

  // 用 useMemo 存储变量
  const cachedData = useMemo(() => {
    return data.filter(item => item.title.includes('React'));
  }, [data]);

  // 这是一个用来获取数据的函数，比如从 API 接口中获取数据
  const fetchData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const result = await response.json();
    setData(result);
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      <ul>
        {cachedData.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在上面的示例中，我们使用了 useMemo 将变量 cachedData 缓存起来。useMemo 接收一个计算函数和一个依赖项列表，如果依赖项的值不发生变化，那么 useMemo 将会返回缓存中的值，而不是重新计算。

在上面的例子中，useMemo 计算函数返回了一个只包含标题中包含 "React" 的项的新数组。每当 data 变化时，useMemo 将重新计算值。

在 fetchData 函数中，我们使用 setData 更新了 data 的值，这也会导致 useMemo 中的依赖项 data 发生变化。由于这个依赖项的变化，useMemo 将会重新计算被缓存的值。

另外，我们还使用了 useState 钩子来存储我们从 API 接口中获取的数据。在 fetchData 函数中，我们使用了 fetch 和 response.json() 方法来获取并解析 JSON 数据，然后通过 setData 更新了 data 的值，从而触发了重新计算 useMemo 缓存中的值。

总结一下，在 ReactJS 中存储单个缓存数据，我们通常会使用 useMemo 和 useState 钩子。useMemo 可以缓存变量，并在依赖项变化时重新计算值，而 useState 可以用来存储从 API 接口中获取的数据。通过这些方法，我们可以在 React 应用程序中提高性能，避免不必要的重复计算。