性能优化

// ❌ 组件订阅整个 todos 数组 — 任何 todo 变化都重渲染
function TodoCount() {
  const { data: todos } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
  return <div>总数：{todos?.length}</div>
}

// ✅ 只订阅数量（原始值）— title 修改不重渲染
function TodoCount() {
  const { data: count } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select: (todos) => todos.length,  // 返回原始值
  })
  return <div>总数：{count}</div>
}

// ❌ 每次重取都产生新数组 → 每次都重渲染
select: (todos) => todos.filter(t => t.completed)

// ✅ 提取为稳定引用
const selectCompleted = (todos: Todo[]) => todos.filter(t => t.completed)

// ✅ 配合 queryOptions 工厂
export function doneTodosOptions() {
  return queryOptions({
    queryKey: todoKeys.lists({ status: 'done' }),
    queryFn: fetchDoneTodos,
  })
}
// 然后调用 useQuery(doneTodosOptions())

// 假设缓存的 data 是：
const oldData = {
  todos: [
    { id: 1, title: 'A', done: false },
    { id: 2, title: 'B', done: false },
  ]
}

// 服务端返回新数据（只改了第二条的 done）：
const newData = {
  todos: [
    { id: 1, title: 'A', done: false },   // ← 未变化，引用保持！
    { id: 2, title: 'B', done: true  },   // ← 变化了，新引用
  ]
}

// 结果：
oldData.todos[0] === newData.todos[0]   // true（引用相等！）
oldData.todos === newData.todos           // false（数组引用变了）

// 默认使用 JSON.parse(JSON.stringify()) 做深拷贝
// 对于特殊数据结构（如 Map、Set），需自定义
import { replaceEqualDeep } from '@tanstack/react-query'

useQuery({
  queryKey: ['data'],
  queryFn: fetchData,
  structuralSharing: (oldData, newData) => {
    // 返回 newData 的深拷贝，同时保持未变化部分的引用
    return replaceEqualDeep(oldData, newData)
  },
})

// 场景：数据永远是全新的（如随机数），不需要结构共享
useQuery({
  queryKey: ['random-number'],
  queryFn: fetchRandomNumber,
  structuralSharing: false,
})

// ❌ 对象字面量每次渲染都是新引用
useQuery({
  queryKey: ['todos', { status, sort: 'date' }],
  queryFn: fetchTodos,
})
// 虽然值可能相同，但每次都是新对象 → 查询键变化 → 新请求

// ✅ 对频繁变化的场景，使用 useMemo
const queryParams = useMemo(
  () => ({ status, sort: 'date' }),
  [status]
)

useQuery({
  queryKey: ['todos', queryParams],
  queryFn: fetchTodos,
})

// ❌ 每次渲染都创建新的 options 对象
function TodoList() {
  return useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    staleTime: 30_000,
    select: (todos) => todos.filter(t => !t.completed),
    // 每次渲染都是新对象 + 新 select 函数
  })
}

// ✅ queryOptions 工厂 — 创建一次，到处复用
const todoListOptions = queryOptions({
  queryKey: ['todos'] as const,
  queryFn: fetchTodos,
  staleTime: 30_000,
})

function TodoList() {
  const { data } = useQuery({
    ...todoListOptions,
    select: activeTodosSelector,  // 提取的稳定函数
  })
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // 谨慎关闭：权衡数据新鲜度和带宽
      refetchOnWindowFocus: false,

      // 或者只对特定查询开启
      refetchOnWindowFocus: (query) => {
        // 只有活跃的、重要的查询才重取
        return query.queryKey[0] === 'notifications'
      },
    },
  },
})

// queryFn 不需要 useCallback — TanStack Query 只在 queryKey 变化时调用它
// 但 select 需要稳定引用（如果依赖外部变量）
function useFilteredTodos(status: string) {
  const selectFn = useCallback(
    (todos: Todo[]) => todos.filter(t => t.status === status),
    [status]
  )

  return useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
    select: selectFn,
  })
}

// ❌ 即使组件不用这些字段，解构也会建立订阅
const { data, isPending, isFetching, error, isStale, isFetched } = useQuery({...})

// ✅ 只取需要的
const { data, isPending, error } = useQuery({...})

// ❌ 一个组件同时处理加载/错误/数据显示
function TodoPage() {
  const { data, isPending, isFetching, error } = useQuery({...})

  if (isPending) return <Spinner />
  if (error) return <Error />
  return (
    <div>
      <Header isFetching={isFetching} />
      <TodoList todos={data} />
    </div>
  )
}

// ✅ 拆分：每个子组件只取自己需要的
function TodoPage() {
  return (
    <div>
      <Suspense fallback={<Spinner />}>
        <TodoHeader />
        <TodoList />
      </Suspense>
    </div>
  )
}

function TodoHeader() {
  const { isFetching } = useQuery({...})   // 只触发重渲染当 isFetching 变化
  return <Header isFetching={isFetching} />
}

function TodoList() {
  const { data } = useQuery({...})
  return <List items={data} />
}