组件拆分与职责边界（对比三层架构）

import { useState, useEffect } from "react";

export default function UserPage() {
  // ── 第 1 坨：数据请求 ──────────────────────
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const [keyword, setKeyword] = useState("");

  useEffect(() => {
    setLoading(true);
    fetch(`/api/users?keyword=${keyword}`)
      .then(res => res.json())
      .then(data => {
        // ── 第 2 坨：业务规则 ──────────────────
        const adults = data.filter(u => u.age >= 18);
        adults.sort((a, b) => b.createdAt - a.createdAt);
        setUsers(adults);
      })
      .catch(e => setError(e.message))
      .finally(() => setLoading(false));
  }, [keyword]);

  // ── 中间还有 100 多行：选中态、删除、批量操作、防抖……

  // ── 最后 150 行：内联样式、布局、渲染 ────
  return (
    <div className="user-page">
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      {loading ? (
        <p>加载中…</p>
      ) : (
        users.map(u => (
          <div key={u.id}>
            <span>{u.name}</span>
            <span>{u.status === "ACTIVE" ? "在职" : "离职"}</span>
          </div>
        ))
      )}
    </div>
  );
}

import { useEffect, useState } from "react";
import { fetchUsers } from "../api/user";
import type { User } from "./types";

export function useUsers(keyword: string) {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    setLoading(true);

    fetchUsers(keyword, controller.signal)
      .then(data => {
        // 业务规则：只看已成年用户，按创建时间倒序（改规则只改这里）
        const visible = data
          .filter(u => u.age >= 18)
          .sort((a, b) => b.createdAt - a.createdAt);
        setUsers(visible);
        setError(null);
      })
      .catch((e: Error) => {
        if (e.name !== "AbortError") setError(e.message);
      })
      .finally(() => setLoading(false));

    // 清理函数：卸载或 keyword 变化时取消上一次请求（第 9 篇讲过）
    return () => controller.abort();
  }, [keyword]);

  return { users, loading, error };
}

import type { User } from "./types";

interface UserListProps {
  users: User[];
  loading: boolean;
  selectedId: number | null;
  onSelect: (id: number) => void;
}

export function UserList({ users, loading, selectedId, onSelect }: UserListProps) {
  if (loading) return <p>加载中…</p>;
  if (users.length === 0) return <p>没有符合条件的用户</p>;

  return (
    <ul className="user-list">
      {users.map(u => (
        <li
          key={u.id}
          className={u.id === selectedId ? "active" : ""}
          onClick={() => onSelect(u.id)}
        >
          <span>{u.name}</span>
          <span>{u.status === "ACTIVE" ? "在职" : "离职"}</span>
        </li>
      ))}
    </ul>
  );
}

import { useState } from "react";
import { useUsers } from "./useUsers";
import { UserList } from "./UserList";
import { SearchInput } from "../../components/ui";

export default function UserListPage() {
  const [keyword, setKeyword] = useState("");
  const [selectedId, setSelectedId] = useState<number | null>(null);

  // 接线 1：页面状态 keyword 驱动 Hook 重新取数
  const { users, loading, error } = useUsers(keyword);

  if (error) return <p role="alert">加载失败：{error}</p>;

  return (
    <div className="user-page">
      <SearchInput value={keyword} onChange={setKeyword} placeholder="搜索用户" />
      // 接线 2：Hook 的数据 + 页面状态，通过 props 交给展示组件
      <UserList
        users={users}
        loading={loading}
        selectedId={selectedId}
        onSelect={setSelectedId}
      />
    </div>
  );
}

import type { ReactNode } from "react";

interface ButtonProps {
  variant?: "primary" | "ghost" | "danger";   // 只认设计语言，不认业务
  onClick?: () => void;
  children: ReactNode;
}

export function Button({ variant = "primary", children, onClick }: ButtonProps) {
  return <button className={`btn btn--${variant}`} onClick={onClick}>{children}</button>;
}
// 这套 interface 写法，下一篇第 28 篇细讲

import { useState } from "react";

export function TagBadge({ initialTags }: { initialTags: string[] }) {
  const [tags, setTags] = useState(initialTags);

  function remove(tag: string) {
    setTags(tags.filter(t => t !== tag));
  }

  return (
    <span className="tag-badge">
      {tags.map(t => (
        <em key={t}>
          {t}
          <button onClick={() => remove(t)}>×</button>
        </em>
      ))}
    </span>
  );
}