你的useEffect真的在「同步」吗？为什么React开发者集体掉进了状态管理的陷阱

const [isDarkMode, setIsDarkMode] = useState(false);
const [inputValue, setInputValue] = useState('');

// ❌ 错误的思维方式
const [products, setProducts] = useState([]);
// 你在欺骗应用：这里放的是真实的数据
// 但实际上这只是上次从API获取到的数据快照

// 真实项目的"标准做法" —— 一个简单列表却需要这样
function ProductList() {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

  useEffect(() => {
    let isMounted = true; // 防止卸载后setState警告
    
    const fetchData = async () => {
      try {
        setIsLoading(true);
        const res = await fetch('/api/products');
        if (!res.ok) thrownewError('请求失败');
        
        const data = await res.json();
        if (isMounted) setProducts(data);
      } catch (err) {
        if (isMounted) setError(err);
      } finally {
        if (isMounted) setIsLoading(false);
      }
    };
    
    fetchData();
    return() => { isMounted = false; };
  }, []);

if (isLoading) return<div>加载中...</div>;
if (error) return<div>出错了：{error.message}</div>;

return (
    <ul>
      {products.map(p => <li key={p.id}>{p.name}</li>)}
    </ul>
  );
}

import { useState, useEffect } from'react';

function FilteredProducts({ categoryId }) {
const [products, setProducts] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

  useEffect(() => {
    let mounted = true;
    
    const fetch = async () => {
      try {
        setIsLoading(true);
        setError(null);
        const res = await fetch(`/api/products?category=${categoryId}`);
        if (!res.ok) thrownewError('请求失败');
        
        const data = await res.json();
        if (mounted) setProducts(data);
      } catch (err) {
        if (mounted) setError(err.message);
      } finally {
        if (mounted) setIsLoading(false);
      }
    };
    
    fetch();
    return() => { mounted = false; };
  }, [categoryId]);

// 其他问题：
// 1. categoryId变化时，旧请求可能晚回来导致显示错误数据
// 2. 切换分类后数据会闪现加载中，即使新数据已经被请求过
// 3. 如果用户离开Tab又回来，数据不会自动刷新
// 4. 需要手工处理AbortController才能真正取消旧请求

if (isLoading) return<div>加载中...</div>;
if (error) return<div>错误：{error}</div>;

return (
    <div>
      {products.map(p => (
        <div key={p.id}>{p.name}</div>
      ))}
    </div>
  );
}

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

asyncfunction fetchProductsByCategory(categoryId) {
const res = await fetch(`/api/products?category=${categoryId}`);
if (!res.ok) thrownewError('请求失败');
return res.json();
}

function FilteredProducts({ categoryId }) {
const { data: products, isLoading, error } = useQuery({
    queryKey: ['products', categoryId], // 👈 关键！带上依赖参数
    queryFn: () => fetchProductsByCategory(categoryId),
    staleTime: 5 * 60 * 1000, // 5分钟内数据视为新鲜
  });

if (isLoading) return<div>加载中...</div>;
if (error) return<div>错误：{error.message}</div>;

return (
    <div>
      {products?.map(p => (
        <div key={p.id}>{p.name}</div>
      ))}
    </div>
  );
}

import { QueryClient, QueryClientProvider } from'@tanstack/react-query';

const queryClient = new QueryClient({
defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,        // 5分钟
      gcTime: 10 * 60 * 1000,          // 10分钟后从内存中清理
      retry: 1,                         // 失败自动重试1次
      refetchOnWindowFocus: true,       // Tab激活时检查刷新
      refetchOnReconnect: true,         // 网络恢复时刷新
    },
  },
});

exportdefaultfunction App() {
return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
    </QueryClientProvider>
  );
}

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

function useTodos() {
return useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const res = await fetch('/api/todos');
      return res.json();
    },
  });
}

function useAddTodo() {
const queryClient = useQueryClient();

return useMutation({
    mutationFn: (newTodo) =>
      fetch('/api/todos', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newTodo),
      }).then(r => r.json()),
    
    onMutate: async (newTodo) => {
      // 1️⃣ 取消任何进行中的todos查询，防止覆盖我们的乐观更新
      await queryClient.cancelQueries({ queryKey: ['todos'] });
      
      // 2️⃣ 备份当前状态以便回滚
      const previousTodos = queryClient.getQueryData(['todos']);
      
      // 3️⃣ 乐观更新：立即在列表中显示新Todo
      queryClient.setQueryData(['todos'], (old) => [
        ...(old || []),
        {
          ...newTodo,
          id: Date.now(), // 临时ID
          isPending: true,
        },
      ]);
      
      return { previousTodos };
    },
    
    onSuccess: (responseData) => {
      // 服务器返回了真实的ID，更新缓存中临时项的ID
      queryClient.setQueryData(['todos'], (old) =>
        old.map(todo =>
          todo.isPending ? { ...responseData, isPending: false } : todo
        )
      );
    },
    
    onError: (err, newTodo, context) => {
      // 4️⃣ 请求失败，回滚到之前的状态
      if (context?.previousTodos) {
        queryClient.setQueryData(['todos'], context.previousTodos);
      }
      // 显示错误提示...
    },
    
    onSettled: () => {
      // 5️⃣ 无论成功失败，都重新验证数据（确保和服务器同步）
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
}

function TodoApp() {
const { data: todos } = useTodos();
const addTodoMutation = useAddTodo();

return (
    <div>
      {todos?.map(todo => (
        <div key={todo.id} style={{
          opacity: todo.isPending ? 0.6 : 1,
        }}>
          {todo.text}
        </div>
      ))}
      
      <button onClick={() => {
        addTodoMutation.mutate({
          text: '新的Todo',
          completed: false,
        });
      }}>
        添加
      </button>
    </div>
  );
}

{
  staleTime: 5 * 60 * 1000,  // 「新鲜度」：数据5分钟内被认为是新的
  gcTime: 10 * 60 * 1000,    // 「生存期」：未使用的数据10分钟后从内存删除
}

// 实战例子：电商商品详情页

useQuery({
  queryKey: ['product', productId],
  queryFn: () => fetchProduct(productId),
  staleTime: 30 * 60 * 1000,  // 商品信息30分钟内不变，不重新请求
  gcTime: 60 * 60 * 1000,      // 1小时内如果用户没看这个商品，清理缓存
});

// ❌ 过度使用，效率低
onSuccess: () => {
  queryClient.invalidateQueries();  // 刷新所有查询！
}

// ✅ 精准控制，高效
onSuccess: () => {
  queryClient.invalidateQueries({
    queryKey: ['products', categoryId], // 只刷新这个分类的商品
  });
}