function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
 
  useEffect(() => {
    let cancelled = false;
 
    async function fetchProducts() {
      setLoading(true);
      try {
        const res = await fetch('/api/products');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const data = await res.json();
        if (!cancelled) setProducts(data);
      } catch (err) {
        if (!cancelled) setError(err);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
 
    fetchProducts();
    return () => { cancelled = true; };
  }, []);
 
  if (loading) return <Spinner />;
  if (error) return <ErrorMsg message={error.message} />;
  return <ProductGrid products={products} />;
}

function ProductList() {
  const { data: products, isLoading, error } = useQuery({
    queryKey: ['products'],
    queryFn: () => fetch('/api/products').then(r => r.json()),
    staleTime: 5 * 60 * 1000,  // 5 分钟内不重新请求
  });
 
  if (isLoading) return <Spinner />;
  if (error) return <ErrorMsg message={error.message} />;
  return <ProductGrid products={products} />;
}

function UserList() {
  const { data: users, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });
 
  // 1. Loading — 骨架屏
  if (isLoading) {
    return <UserListSkeleton count={5} />;
  }
 
  // 2. Error — 错误提示 + 重试按钮
  if (error) {
    return (
      <ErrorState
        message={error.message}
        onRetry={() => {/* refetch */}}
      />
    );
  }
 
  // 3. Empty — 空状态引导
  if (users.length === 0) {
    return (
      <EmptyState
        icon="👤"
        title="还没有用户"
        description="创建第一个用户开始吧"
        action={<button>创建用户</button>}
      />
    );
  }
 
  // 4. Success — 正常数据展示
  return <UserGrid users={users} />;
}

function SignupForm() {
  // 1. 表单 state（所有字段集中管理）
  const [form, setForm] = useState({
    name: '', email: '', password: '',
  });
 
  // 2. 校验 state
  const [errors, setErrors] = useState({});
 
  // 3. 提交状态
  const [submitting, setSubmitting] = useState(false);
  const [serverError, setServerError] = useState(null);
 
  // 4. 字段变化
  function handleChange(field, value) {
    setForm(prev => ({ ...prev, [field]: value }));
    // 字段变了 → 清除该字段的校验错误
    setErrors(prev => ({ ...prev, [field]: undefined }));
  }
 
  // 5. 客户端校验
  function validate() {
    const newErrors = {};
    if (!form.name.trim()) newErrors.name = '名字不能为空';
    if (!form.email.includes('@')) newErrors.email = '邮箱格式不正确';
    if (form.password.length < 6) newErrors.password = '密码至少 6 位';
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  }
 
  // 6. 提交
  async function handleSubmit(e) {
    e.preventDefault();
    if (!validate()) return;
 
    setSubmitting(true);
    setServerError(null);
    try {
      const res = await fetch('/api/signup', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) {
        const data = await res.json();
        throw new Error(data.error || '注册失败');
      }
      // Success → 跳转
      window.location.href = '/welcome';
    } catch (err) {
      setServerError(err.message);
    } finally {
      setSubmitting(false);
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <Field label="名字" error={errors.name}>
        <input value={form.name} onChange={e => handleChange('name', e.target.value)} />
      </Field>
      <Field label="邮箱" error={errors.email}>
        <input value={form.email} onChange={e => handleChange('email', e.target.value)} />
      </Field>
      <Field label="密码" error={errors.password}>
        <input type="password" value={form.password}
               onChange={e => handleChange('password', e.target.value)} />
      </Field>
      {serverError && <div className="server-error">{serverError}</div>}
      <button type="submit" disabled={submitting}>
        {submitting ? '注册中...' : '注册'}
      </button>
    </form>
  );
}

// 第 1 层 — useState：组件内部使用
function Toggle() {
  const [isOpen, setIsOpen] = useState(false);  // 只在这个组件里用
  // ...
}
 
// 第 2 层 — 状态提升：兄弟组件需要共享
function Parent() {
  const [text, setText] = useState('');         // A 和 B 都需要
  return (
    <>
      <PanelA text={text} onTextChange={setText} />
      <PanelB text={text} />
    </>
  );
}
 
// 第 3 层 — Context：层级太深，不想 props drilling
const ThemeContext = createContext('light');
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={theme}>
      <DeepTree />  {/* 10 层嵌套都不需要传 props */}
    </ThemeContext.Provider>
  );
}
 
// 第 4 层 — Reducer + Context：更新逻辑复杂
// 购物车：ADD / REMOVE / UPDATE_QTY / CLEAR / APPLY_COUPON
// 这些逻辑放在一个 reducer 里比散落在各处清晰得多
 
// 第 5 层 — External Store：跨页面、高频更新、需要 selector
import { create } from 'zustand';
const useStore = create((set) => ({
  user: null,
  cart: [],
  addToCart: (item) => set((s) => ({ cart: [...s.cart, item] })),
}));