ReactQuery与ContextAPI选型、实现及渲染优化技术咨询

1. 何时选择直接用React Query获取数据，还是创建Context API管理？ #

直接用React Query的场景：

• 组件仅需独立获取某份书籍数据（比如单本书详情页），无需跨多层组件共享
• 想直接利用React Query自带的缓存、自动重取、加载/错误状态管理等特性，无需额外封装
• 数据使用范围有限，不会在多个无关组件中重复调用

用Context API管理的场景：

• 书籍数据需要全局共享（比如全局书籍列表、当前选中的书籍），且多个层级的组件都要访问
• 需要统一封装书籍数据的业务逻辑（比如筛选、转换书籍格式），避免在多个组件中重复写相同逻辑
• 需要整合多个React Query请求的结果（比如同时获取书籍列表和分类数据，统一对外暴露）

2. 若使用Context API，如何结合React Query实现？如何设置staletime避免过度重取？另外，如何将ReactQuery获取的数据传入Context的value中？ #

结合实现步骤： #

1. 先创建Context：

import { createContext, useContext } from 'react';

const BooksContext = createContext();

export const useBooks = () => useContext(BooksContext);

2. 编写Context Provider组件，在内部用useQuery获取书籍数据，再把数据、状态或封装的方法传入Context的value：

import { useQuery, useMemo } from '@tanstack/react-query';

// 模拟获取书籍列表的API
const fetchBooks = async () => {
  const res = await fetch('/api/books');
  return res.json();
};

export const BooksProvider = ({ children }) => {
  // 设置staleTime避免过度重取：这里设为5分钟，数据5分钟内不会被标记为过期
  const { data: books, isLoading, error } = useQuery({
    queryKey: ['books'],
    queryFn: fetchBooks,
    staleTime: 5 * 60 * 1000, // 5分钟
  });

  // 封装业务方法，比如根据ID查找书籍
  const getBookById = (id) => books?.find(book => book.id === id);

  // 用useMemo缓存value，避免不必要的重渲染（对应问题3的优化）
  const contextValue = useMemo(() => ({
    books,
    isLoading,
    error,
    getBookById
  }), [books, isLoading, error]);

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

3. 在App根组件或需要共享数据的层级包裹BooksProvider，子组件就能通过useBooks()获取数据。

关于staleTime的设置： #

staleTime用于指定数据从"新鲜"变为"过期"的时长。在staleTime范围内，React Query不会自动发起重取（除非手动触发或满足其他重取条件）。可根据业务调整：比如高频更新的书籍数据设短一些（如1分钟），静态书籍数据可设更长（如24小时）。

3. 若在Context中重取但数据未变，会触发组件重渲染吗？若会，能否用memoization阻止？ #

• 默认情况下，React Query重取后如果数据完全不变（结构和内容一致），会复用之前的data引用。此时若Context的value直接依赖该data，只要引用不变，就不会触发订阅Context的组件重渲染。
• 但如果Context的value是每次渲染都新建的对象（比如{ books: data }），即使data引用没变，新对象的引用会改变，导致组件不必要重渲染。

解决方法就是用useMemo缓存Context的value，像上面代码示例那样，将value放在useMemo中，依赖项设为books、isLoading、error这些可能变化的变量。只有当依赖项改变时，才会重新创建value，从而避免无效重渲染。

另外，还可以结合React.memo包裹组件，配合useBooks()只提取组件需要的部分数据，进一步优化渲染性能。

内容的提问来源于stack exchange，提问作者Niv G.