React中如何正确缓存API数据避免重复请求？

迷人的琬晴提问于 2026-03-15 10:50:23 阅读 43

优化

我用useEffect去请求用户数据，但每次组件重新渲染都会重新发请求，明明数据没变。试过把依赖数组设为空，但又拿不到最新的userId。有没有办法只在userId变化时才请求，同时缓存结果？

这是我的代码：

useEffect(() => {
  const fetchUser = async () => {
    const res = await fetch(<code>/api/user/${userId}</code>);
    const data = await res.json();
    setUser(data);
  };
  fetchUser();
}, [userId]);

缓存优化缓存策略

我来解答赞 13 收藏

反馈

1 条解答

Designer°俊杰 Lv1

这个问题很简单，用useRef做个缓存就行：

const userCache = useRef({});



useEffect(() => {

  // 先检查缓存，有就直接用

  if (userCache.current[userId]) {

    setUser(userCache.current[userId]);

    return;

  }



  const fetchUser = async () => {

    const res = await fetch(/api/user/${userId});

    const data = await res.json();

    // 存进缓存

    userCache.current[userId] = data;

    setUser(data);

  };

  fetchUser();

}, [userId]);

这样只有第一次请求会发网络请求，之后同一个userId会直接从缓存读。

如果你想更规范一点，可以封装成自定义hook：

function useUser(userId) {

  const [user, setUser] = useState(null);

  const cache = useRef({});



  useEffect(() => {

    if (cache.current[userId]) {

      setUser(cache.current[userId]);

      return;

    }



    fetch(/api/user/${userId})

      .then(res => res.json())

      .then(data => {

        cache.current[userId] = data;

        setUser(data);

      });

  }, [userId]);



  return user;

}

然后组件里直接用 const user = useUser(userId) 就行。

另外如果你们项目里这种场景多，建议直接上 @tanstack/react-query 或者 SWR，这俩都是专门干缓存这事的，开箱即用，比自己写省心多了。

2026-03-17 16:14