React 状态管理先看作用域，不先选库

// ❌ 不好：表单草稿放在全局 store
// 问题：生命周期不受组件控制，切换页面时状态残留，需要手动清理
 
import { create } from 'zustand'
 
const useProductFormStore = create((set) => ({
  draft: null,
  isDirty: false,
  setDraft: (draft) => set({ draft, isDirty: true }),
  reset: () => set({ draft: null, isDirty: false }),
}))
 
// 编辑页组件里
function ProductEditPage({ productId }) {
  const { draft, setDraft, isDirty, reset } = useProductFormStore()
 
  // 每次进入页面都要手动检查并清理上一个草稿
  useEffect(() => {
    reset()
    fetchProduct(productId).then(setDraft)
  }, [productId])
 
  // 组件卸载时也要清理——如果忘了写就泄漏了
  useEffect(() => () => reset(), [])
}

// ✅ 好：表单状态留在编辑页组件内部
// 优势：组件卸载即销毁，不需要手动清理，生命周期天然正确
 
import { useForm } from 'react-hook-form'
import { useQuery, useQueryClient } from '@tanstack/react-query'
 
function ProductEditPage({ productId }) {
  const queryClient = useQueryClient()
 
  // 服务端数据用 React Query，缓存和刷新自动管理
  const { data: product } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetchProduct(productId),
  })
 
  // 表单草稿用 React Hook Form，状态完全局部化
  const form = useForm({
    values: product, // 数据加载后自动填充
  })
 
  const onSubmit = async (values) => {
    await updateProduct(productId, values)
    // 保存成功后刷新列表缓存
    queryClient.invalidateQueries({ queryKey: ['products'] })
  }
 
  // 组件卸载时，所有表单状态自动销毁，无需手动清理
}

// ❌ 不好：筛选条件用 useState
// 问题：刷新丢失、无法分享、不支持浏览器后退
 
function ReportList() {
  const [page, setPage] = useState(1)
  const [keyword, setKeyword] = useState('')
  const [status, setStatus] = useState('all')
  const [dateRange, setDateRange] = useState(['2026-01-01', '2026-06-30'])
 
  // 这些状态在 URL 上完全不可见
  // 用户无法把「状态=进行中 + 关键词=Q2」这个视图分享给同事
}

// ✅ 好：筛选条件同步到 URL search params
// 优势：可分享、可恢复、支持浏览器后退
 
import { useSearchParams, useRouter } from 'next/navigation'
 
function ReportList() {
  const searchParams = useSearchParams()
  const router = useRouter()
 
  // 从 URL 读取状态，URL 就是单一数据源
  const page = Number(searchParams.get('page') || 1)
  const keyword = searchParams.get('keyword') || ''
  const status = searchParams.get('status') || 'all'
  const from = searchParams.get('from') || '2026-01-01'
  const to = searchParams.get('to') || '2026-06-30'
 
  const update = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams.toString())
    params.set(key, value)
    // 用 router.push 保持浏览器历史记录，支持后退
    router.push(`?${params.toString()}`)
  }
 
  // 用户分享的 URL 包含完整筛选上下文
  // /reports?page=2&keyword=Q2&status=active&from=2026-01-01&to=2026-06-30
}

// ❌ 不好：在全局 store 里手动管理服务端缓存
// 问题：缓存过期逻辑分散，跨组件缓存不一致，不支持失效通知
 
import { create } from 'zustand'
 
const useOrderStore = create((set, get) => ({
  orders: [],
  currentOrder: null,
  ordersFetchedAt: 0,
  currentOrderFetchedAt: 0,
 
  fetchOrders: async () => {
    const orders = await api.getOrders()
    set({ orders, ordersFetchedAt: Date.now() })
  },
 
  fetchCurrentOrder: async (id) => {
    const order = await api.getOrder(id)
    set({ currentOrder: order, currentOrderFetchedAt: Date.now() })
  },
 
  // 详情页更新了订单，但列表的 ordersFetchedAt 没有变
  // 返回列表页时缓存判断「还没过期」，数据不一致
  updateOrder: async (id, data) => {
    const updated = await api.updateOrder(id, data)
    set({ currentOrder: updated })
  },
}))

// ✅ 好：服务端数据用 TanStack Query，缓存一致性由框架保证
// 优势：自动失效、后台重新验证、乐观更新、跨组件缓存同步
 
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 
// 列表页
function OrderList() {
  const { data: orders, isLoading } = useQuery({
    queryKey: ['orders'],
    queryFn: () => api.getOrders(),
    staleTime: 30_000, // 30秒内视为新鲜数据
  })
 
  if (isLoading) return <Skeleton />
  return <OrderTable orders={orders} />
}
 
// 详情页
function OrderDetail({ orderId }) {
  const queryClient = useQueryClient()
 
  const { data: order } = useQuery({
    queryKey: ['order', orderId],
    queryFn: () => api.getOrder(orderId),
  })
 
  // mutation 完成后自动让相关缓存失效
  const mutation = useMutation({
    mutationFn: (data) => api.updateOrder(orderId, data),
    onSuccess: () => {
      // 列表和详情的缓存同时失效，下次访问自动重新拉取
      queryClient.invalidateQueries({ queryKey: ['orders'] })
      queryClient.invalidateQueries({ queryKey: ['order', orderId] })
    },
  })
}

// ❌ 不好：把主题和用户信息放在同一个 Context
// 问题：主题切换时，只关心用户信息的组件也会重渲染
 
const AppContext = React.createContext(null)
 
function AppProvider({ children }) {
  const [theme, setTheme] = useState('light')
  const [user, setUser] = useState(null)
 
  return (
    <AppContext.Provider value={{ theme, setTheme, user, setUser }}>
      {children}
    </AppContext.Provider>
  )
}

// ✅ 好：按变化频率拆分 Context
// 优势：主题切换不影响用户信息的消费者
 
const ThemeContext = React.createContext(null)
const UserContext = React.createContext(null)
 
// 主题频繁切换（用户可能反复点），但不影响用户信息消费者
function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light')
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}
 
// 用户信息登录后几乎不变，独立管理
function UserProvider({ children }) {
  const [user, setUser] = useState(null)
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  )
}