// 就像商家（父组件）给你（子组件）寄了一件指定颜色和尺码的 T 恤
<ClothingItem
  name="纯棉T恤" // 相当于快递单上的"商品名称"
  color="白色" // 相当于快递单上的"颜色"
  size="L" // 相当于快递单上的"尺码"
/>

// 你写了一个普通函数，它接收参数
function sayHello(userName) {
  console.log("你好，" + userName);
}
sayHello("小明"); // 输出：你好，小明

// React 函数组件就是这样的函数，只不过参数叫做 props
function SayHello(props) {
  // props 是一个对象，装着调用者传来的所有"参数"
  return <h1>你好，{props.userName}！</h1>;
}
// 使用时就像给函数传参一样：
<SayHello userName="小明" />  {/* 渲染结果：你好，小明！*/}

父组件（数据的拥有者）
    │
    │  通过 Props 向下传递
    ▼
子组件（数据的使用者）
    │
    │  通过 Props 继续向下传递
    ▼
孙子组件（数据的最终使用者）

// 01-ts-basic.tsx —— 可直接复制运行
// ============================================================
// 第一步：用 interface 或 type 定义 Props 的"形状"（Shape）
//        interface：接口，可以理解为"一份合同"，规定 props 必须长什么样
// ============================================================
interface UserCardProps {
  //   属性名      类型注解      含义
  name: string; // 姓名，字符串类型
  age: number; // 年龄，数字类型
  isVip: boolean; // 是否为 VIP，布尔类型
}

// ============================================================
// 第二步：在函数参数后标注类型
// ============================================================
function UserCard({ name, age, isVip }: UserCardProps) {
  // 解构取值的同时获得完整的类型提示
  return (
    <div style={{ border: "1px solid #ccc", padding: 16, borderRadius: 8 }}>
      <h2>{name}</h2>
      {/* 鼠标悬停在 name 上，IDE 会显示：string */}
      <p>年龄：{age} 岁</p>
      {/* 鼠标悬停在 age 上，IDE 会显示：number */}
      <p>身份：{isVip ? "VIP 会员" : "普通用户"}</p>
      {/* isVip 是 boolean，三元表达式类型安全 */}
    </div>
  );
}

// ============================================================
// 第三步：使用组件时传错类型 → TypeScript 直接标红报错
// ============================================================
function App() {
  return (
    <div>
      {/* ✅ 正确：类型全部匹配 */}
      <UserCard name="小明" age={18} isVip={true} />

      {/* ❌ 错误：age 传了字符串，TS 编译报错 */}
      {/* <UserCard name="小明" age="十八岁" isVip={true} /> */}

      {/* ❌ 错误：缺少必填属性 name，TS 编译报错 */}
      {/* <UserCard age={18} isVip={true} /> */}
    </div>
  );
}

export default App;

// 02-ts-optional.tsx —— 可直接复制运行
// ============================================================
// 在属性名后加 ? 表示"这个属性可以不传"
// ============================================================
interface ButtonProps {
  text: string; // 必填：按钮上显示的文字
  size?: "small" | "medium" | "large"; // 可选：按钮尺寸，只能选这三者之一
  //  └── ? 表示"可以不传，传了就必须是这三个值之一"
  disabled?: boolean; // 可选：是否禁用，不传默认为 false
  onClick?: () => void; // 可选：点击回调函数
  //            └── void 表示"这个函数没有返回值"
}

function Button({
  text,
  size = "medium",
  disabled = false,
  onClick,
}: ButtonProps) {
  //                          └── 解构时给默认值（TypeScript 也能识别）
  // 根据 size 计算实际像素值
  const sizeMap = {
    small: { padding: "6px 12px", fontSize: 12 },
    medium: { padding: "10px 20px", fontSize: 16 },
    large: { padding: "14px 28px", fontSize: 20 },
  };

  return (
    <button
      style={{
        ...sizeMap[size], // size 永远有值，因为有默认值兜底
        cursor: disabled ? "not-allowed" : "pointer",
        opacity: disabled ? 0.5 : 1,
      }}
      disabled={disabled} // disabled 是 HTML button 的原生属性
      onClick={onClick} // onClick 可能为 undefined，但 button 的 onClick 接受 undefined
    >
      {text}
    </button>
  );
}

// ============================================================
// 使用演示：可选属性可传可不传
// ============================================================
function App() {
  return (
    <div style={{ display: "flex", gap: 10, padding: 20 }}>
      {/* ✅ 只传必填的 text，其余用默认值 */}
      <Button text="默认按钮" />

      {/* ✅ 传递部分可选属性 */}
      <Button text="大号按钮" size="large" />

      {/* ✅ 传递全部属性 */}
      <Button
        text="不可点击"
        size="small"
        disabled={true}
        onClick={() => alert("这个按钮不可点击")}
      />
    </div>
  );
}

export default App;

// 03-ts-union.tsx —— 可直接复制运行
// ============================================================
// 联合类型：用 | 分隔多个可能的类型
// 作用：比 string 更精确，防止传入意料之外的值
// ============================================================

// 定义状态类型 —— 只能是这三个字符串之一
type StatusType = "success" | "warning" | "error";
//    └── type 关键字：给类型起一个别名（类似给手机号存一个"联系人"名字）

// 定义按钮变体类型
type VariantType = "primary" | "danger" | "default" | "text";

interface StatusBadgeProps {
  status: StatusType; // 必填，值必须是 "success" | "warning" | "error"
  variant?: VariantType; // 可选，值必须是四个变体之一
  message: string; // 必填的提示文字
}

function StatusBadge({
  status,
  variant = "default",
  message,
}: StatusBadgeProps) {
  // 根据 status 精确匹配颜色（不需要 default 兜底，因为 TS 保证不会传错）
  const colorMap: Record<StatusType, string> = {
    // Record<Key类型, Value类型>：创建一个"键值对字典"的类型
    success: "#4CAF50", // 绿色
    warning: "#FF9800", // 橙色
    error: "#F44336", // 红色
  };

  return (
    <div
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 8,
        padding: "8px 16px",
        backgroundColor: colorMap[status],
        color: "white",
        borderRadius: 6,
        fontSize: 14,
      }}
    >
      {/* 不同状态显示不同图标 */}
      <span>
        {status === "success" ? "✓" : status === "warning" ? "⚠" : "✕"}
      </span>
      <span>{message}</span>
      {variant !== "default" && (
        <span style={{ fontSize: 11, opacity: 0.8 }}>({variant})</span>
      )}
    </div>
  );
}

function App() {
  return (
    <div
      style={{ display: "flex", flexDirection: "column", gap: 10, padding: 20 }}
    >
      <StatusBadge status="success" message="数据保存成功" />
      <StatusBadge status="warning" message="磁盘空间不足" variant="danger" />
      <StatusBadge status="error" message="网络连接失败" variant="primary" />

      {/* ❌ 编译报错："loading" 不在 StatusType 的范围内 */}
      {/* <StatusBadge status="loading" message="加载中..." /> */}
    </div>
  );
}

export default App;

// 04-ts-complex.tsx —— 可直接复制运行
// ============================================================
// 实际开发中最常见的 props 类型：对象、数组、函数、children
// ============================================================

// ---------- 1. 定义嵌套对象的类型 ----------
interface Address {
  city: string; // 城市
  district: string; // 区
  detail?: string; // 详细地址（可选）
}

// ---------- 2. 定义数组元素的类型 ----------
interface Hobby {
  id: number; // 唯一ID
  name: string; // 爱好名称
  level: "beginner" | "intermediate" | "advanced"; // 熟练程度
}

// ---------- 3. 定义组件的 Props ----------
interface UserProfileProps {
  // ----- 对象类型 -----
  user: {
    name: string;
    age: number;
    address: Address; // 嵌套对象，引用上面定义的 Address 类型
  };

  // ----- 数组类型 -----
  hobbies: Hobby[]; // Hobby 类型的数组，等价于 Array<Hobby>

  // ----- 函数类型（回调） -----
  onFollow: (userId: number) => void;
  //         └── 参数列表        └── 返回值类型（void = 无返回值）
  onDelete: (userId: number, reason: string) => Promise<void>;
  //                                            └── Promise<void> = 返回一个 Promise

  // ----- children 类型 -----
  children?: React.ReactNode;
  //          └── ReactNode 是 React 中最宽泛的"可渲染内容"类型
  //             可以是 string、number、JSX 元素、数组、null、undefined 等
}

function UserProfile({
  user,
  hobbies,
  onFollow,
  onDelete,
  children,
}: UserProfileProps) {
  // 计算用户等级（根据年龄）
  const userLevel = user.age >= 60 ? "老年" : user.age >= 30 ? "中年" : "青年";

  return (
    <div
      style={{
        border: "1px solid #e0e0e0",
        borderRadius: 12,
        padding: 24,
        maxWidth: 400,
      }}
    >
      {/* 头部：用户基础信息 */}
      <div style={{ marginBottom: 16 }}>
        <h2 style={{ margin: 0 }}>{user.name}</h2>
        <p style={{ color: "#888", margin: "4px 0" }}>
          {user.age} 岁 · {userLevel} · {user.address.city}{" "}
          {user.address.district}
        </p>
        {user.address.detail && (
          <p style={{ color: "#aaa", fontSize: 13, margin: 0 }}>
            {user.address.detail}
          </p>
        )}
      </div>

      {/* 爱好列表 */}
      <div style={{ marginBottom: 16 }}>
        <h4 style={{ margin: "0 0 8px" }}>爱好标签：</h4>
        <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
          {hobbies.map((hobby) => (
            <span
              key={hobby.id} // key 必须在 map 的最外层元素上
              style={{
                padding: "4px 10px",
                borderRadius: 12,
                fontSize: 13,
                backgroundColor:
                  hobby.level === "advanced"
                    ? "#e8f5e9"
                    : hobby.level === "intermediate"
                      ? "#fff3e0"
                      : "#f3e5f5",
                color:
                  hobby.level === "advanced"
                    ? "#2e7d32"
                    : hobby.level === "intermediate"
                      ? "#e65100"
                      : "#6a1b9a",
              }}
            >
              {hobby.name}
            </span>
          ))}
        </div>
      </div>

      {/* children 插槽区域 */}
      {children && (
        <div
          style={{
            marginBottom: 16,
            padding: 12,
            backgroundColor: "#f9f9f9",
            borderRadius: 8,
          }}
        >
          {children}
        </div>
      )}

      {/* 操作按钮 */}
      <div style={{ display: "flex", gap: 8 }}>
        <button
          onClick={() => onFollow(1)}
          style={{ padding: "8px 20px", cursor: "pointer" }}
        >
          关注
        </button>
        <button
          onClick={() => onDelete(1, "不再感兴趣")}
          style={{
            padding: "8px 20px",
            cursor: "pointer",
            color: "#f44336",
            border: "1px solid #f44336",
            background: "transparent",
          }}
        >
          删除
        </button>
      </div>
    </div>
  );
}

function App() {
  // 模拟用户数据（实际开发中通常来自 API 请求）
  const sampleUser = {
    name: "小明",
    age: 25,
    address: {
      city: "北京",
      district: "朝阳区",
      detail: "望京SOHO T3 12层",
    },
  };

  const sampleHobbies: Hobby[] = [
    // 显式标注数组类型，获得智能提示
    { id: 1, name: "React 编程", level: "advanced" },
    { id: 2, name: "篮球", level: "intermediate" },
    { id: 3, name: "摄影", level: "beginner" },
  ];

  return (
    <UserProfile
      user={sampleUser}
      hobbies={sampleHobbies}
      onFollow={(id) => console.log("关注了用户", id)}
      onDelete={async (id, reason) => {
        // async 函数自动返回 Promise
        console.log("删除了用户", id, "原因:", reason);
      }}
    >
      {/* 这段 JSX 会通过 children prop 传给 UserProfile */}
      <p style={{ margin: 0, fontSize: 14, color: "#666" }}>
        💬 "热爱生活，热爱代码。"
      </p>
    </UserProfile>
  );
}

export default App;

// 05-ts-complete.tsx —— 可直接复制运行，覆盖所有常见 Props 类型场景
import React, { useState } from "react";

// ==================== 类型定义区 ====================

// 表格列配置的类型
interface Column {
  key: string; // 列的 key（对应数据中的字段名）
  title: string; // 列标题
  width?: number; // 列宽（可选）
  sortable?: boolean; // 是否可排序（可选）
  render?: (value: unknown, record: Record<string, unknown>) => React.ReactNode;
  //        └── unknown 表示"我不知道是什么类型，但比 any 安全"
  //        └── Record<string, unknown> = { [key: string]: unknown }
  //            即"键是字符串、值类型未知的对象"
}

// 分页配置的类型
interface Pagination {
  current: number; // 当前页码
  pageSize: number; // 每页条数
  total: number; // 总条数
  onChange: (page: number) => void; // 翻页回调
}

// 组件的 Props
interface DataTableProps {
  // --- 必填 ---
  columns: Column[]; // 列配置数组
  dataSource: Record<string, unknown>[]; // 数据源（对象数组）

  // --- 可选 ---
  rowKey?: string; // 行唯一标识的字段名，默认 "id"
  loading?: boolean; // 加载状态
  emptyText?: string; // 空数据提示文字
  pagination?: Pagination; // 分页配置（整个对象可选）
}

// ==================== 组件实现 ====================

function DataTable({
  columns,
  dataSource,
  rowKey = "id",
  loading = false,
  emptyText = "暂无数据",
  pagination,
}: DataTableProps) {
  // 当前排序状态
  const [sortKey, setSortKey] = useState<string | null>(null);
  //                              └── useState 的泛型：string | null 联合类型
  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
  //                                       └── 泛型限定只能是这两个字符串

  // 排序逻辑
  const sortedData = [...dataSource].sort((a, b) => {
    if (!sortKey) return 0;
    const aVal = a[sortKey];
    const bVal = b[sortKey];
    if (typeof aVal === "number" && typeof bVal === "number") {
      return sortOrder === "asc" ? aVal - bVal : bVal - aVal;
    }
    return 0;
  });

  // 处理表头点击排序
  const handleSort = (key: string) => {
    if (sortKey === key) {
      // 同一列 → 切换正序/倒序
      setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));
    } else {
      // 不同列 → 重置为正序
      setSortKey(key);
      setSortOrder("asc");
    }
  };

  // ===== 加载态 =====
  if (loading) {
    return <div style={{ textAlign: "center", padding: 40 }}>加载中...</div>;
  }

  // ===== 空数据态 =====
  if (dataSource.length === 0) {
    return (
      <div style={{ textAlign: "center", padding: 40, color: "#999" }}>
        {emptyText}
      </div>
    );
  }

  // ===== 正常数据态 =====
  return (
    <div>
      <table style={{ width: "100%", borderCollapse: "collapse" }}>
        {/* 表头 */}
        <thead>
          <tr style={{ backgroundColor: "#f5f5f5" }}>
            {columns.map((col) => (
              <th
                key={col.key}
                style={{
                  padding: "12px 16px",
                  textAlign: "left",
                  borderBottom: "2px solid #e0e0e0",
                  cursor: col.sortable ? "pointer" : "default",
                  width: col.width,
                }}
                onClick={() => col.sortable && handleSort(col.key)}
              >
                {col.title}
                {col.sortable && sortKey === col.key && (
                  <span style={{ marginLeft: 4 }}>
                    {sortOrder === "asc" ? "↑" : "↓"}
                  </span>
                )}
              </th>
            ))}
          </tr>
        </thead>

        {/* 表体 */}
        <tbody>
          {sortedData.map((record) => (
            <tr
              key={String(record[rowKey])}
              style={{ borderBottom: "1px solid #f0f0f0" }}
            >
              {/* 将 rowKey 转为字符串，因为 key 需要 string | number */}
              {columns.map((col) => (
                <td key={col.key} style={{ padding: "12px 16px" }}>
                  {/* 有自定义 render 就用 render，没有就直接显示原始值 */}
                  {col.render
                    ? col.render(record[col.key], record)
                    : String(record[col.key] ?? "-")}
                  {/*                                └── ?? 是"空值合并运算符"
                         record[col.key] 为 null 或 undefined 时显示 "-" */}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {/* 分页 */}
      {pagination && (
        <div
          style={{
            display: "flex",
            justifyContent: "flex-end",
            padding: 16,
            gap: 8,
          }}
        >
          <span style={{ color: "#666" }}>
            共 {pagination.total} 条，第 {pagination.current}/
            {Math.ceil(pagination.total / pagination.pageSize)} 页
          </span>
          <button
            disabled={pagination.current <= 1}
            onClick={() => pagination.onChange(pagination.current - 1)}
          >
            上一页
          </button>
          <button
            disabled={
              pagination.current >=
              Math.ceil(pagination.total / pagination.pageSize)
            }
            onClick={() => pagination.onChange(pagination.current + 1)}
          >
            下一页
          </button>
        </div>
      )}
    </div>
  );
}

// ==================== 使用示例 ====================
function App() {
  const columns: Column[] = [
    { key: "name", title: "姓名", sortable: true },
    { key: "age", title: "年龄", width: 80, sortable: true },
    { key: "email", title: "邮箱" },
    {
      key: "status",
      title: "状态",
      // 自定义渲染：将原始值转换为带颜色的标签
      render: (value) => {
        // value 类型为 unknown，但你可以根据业务逻辑安全使用
        const status = value as string; // 类型断言：告诉 TS"我知道它是 string"
        const colorMap: Record<string, string> = {
          active: "#4CAF50",
          inactive: "#9E9E9E",
          pending: "#FF9800",
        };
        return (
          <span
            style={{
              padding: "2px 8px",
              borderRadius: 4,
              backgroundColor: colorMap[status] || "#e0e0e0",
              color: "white",
              fontSize: 13,
            }}
          >
            {status}
          </span>
        );
      },
    },
  ];

  const data: Record<string, unknown>[] = [
    {
      id: 1,
      name: "小明",
      age: 25,
      email: "xiaoming@example.com",
      status: "active",
    },
    {
      id: 2,
      name: "小红",
      age: 30,
      email: "xiaohong@example.com",
      status: "pending",
    },
    {
      id: 3,
      name: "小刚",
      age: 28,
      email: "xiaogang@example.com",
      status: "inactive",
    },
  ];

  const [page, setPage] = useState(1);

  return (
    <DataTable
      columns={columns}
      dataSource={data}
      loading={false}
      pagination={{
        current: page,
        pageSize: 2,
        total: 3,
        onChange: (p) => setPage(p),
      }}
    />
  );
}

export default App;

// 06-ts-class.tsx —— 类组件 TypeScript Props 定义
import React, { Component } from "react";

// ============================================================
// 第一步：定义 Props 和 State 的类型（和函数组件一样）
// ============================================================
interface ClassCardProps {
  title: string; // 必填：卡片标题
  content: string; // 必填：卡片内容
  variant?: "default" | "outlined" | "elevated"; // 可选：卡片样式变体
  onClose?: () => void; // 可选：关闭回调
}

// State（状态）也需要定义类型
interface ClassCardState {
  isVisible: boolean; // 是否可见
  clickCount: number; // 点击次数
}

// ============================================================
// 第二步：Component<Props类型, State类型>
//        泛型参数1 = Props 的类型
//        泛型参数2 = State 的类型
// ============================================================
class ClassCard extends Component<ClassCardProps, ClassCardState> {
  //                                   └── 两个泛型参数

  // ----- 构造函数：初始化 state -----
  constructor(props: ClassCardProps) {
    super(props); // 类组件中必须先调用 super(props)
    this.state = {
      isVisible: true,
      clickCount: 0,
    };
  }

  // ----- 事件处理方法（需要用箭头函数绑定 this 或手动 bind）-----
  handleClose = () => {
    // 箭头函数自动绑定 this，不需要 constructor 里 bind
    this.setState({ isVisible: false }); // 更新 state
    this.props.onClose?.(); // 调用父组件传来的回调
    //     └── ?. 是"可选链操作符"：onClose 存在才调用，不存在就跳过
  };

  handleClick = () => {
    this.setState((prevState) => ({
      // 函数式更新，prevState 保证是最新值
      clickCount: prevState.clickCount + 1,
    }));
  };

  // ----- render 方法：必须实现，返回 JSX -----
  render() {
    // 从 props 和 state 中解构取值
    const { title, content, variant = "default" } = this.props;
    //    └── 类组件中 props 挂在 this 上，不是函数的参数
    const { isVisible, clickCount } = this.state;

    // 根据 variant 计算样式
    const variantStyle: Record<string, React.CSSProperties> = {
      // React.CSSProperties 是 style 属性的内置类型
      default: {
        border: "1px solid #ccc",
        boxShadow: "none",
      },
      outlined: {
        border: "2px solid #1976D2",
        boxShadow: "none",
      },
      elevated: {
        border: "none",
        boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
      },
    };

    if (!isVisible) {
      // 不可见时返回 null（不渲染任何内容）
      return null;
    }

    return (
      <div
        style={{
          padding: 20,
          borderRadius: 8,
          maxWidth: 400,
          ...variantStyle[variant],
        }}
      >
        {/* 关闭按钮 */}
        {this.props.onClose && (
          // 如果有 onClose 回调才显示关闭按钮
          <button
            onClick={this.handleClose}
            style={{
              float: "right",
              cursor: "pointer",
              border: "none",
              background: "none",
            }}
          >
            ✕
          </button>
        )}

        <h3 style={{ margin: "0 0 8px" }}>{title}</h3>
        <p style={{ color: "#555", margin: 0 }}>{content}</p>

        {/* 计数器 */}
        <button onClick={this.handleClick} style={{ marginTop: 12 }}>
          点击次数：{clickCount}
        </button>
      </div>
    );
  }
}

// ============================================================
// 类组件一样可以设置 defaultProps
// ============================================================
// ClassCard.defaultProps = {
//   variant: "default",
// };

export default ClassCard;

# React 19 + Vite 环境通常已内置，无需额外安装
# 如果没有，运行：
npm install prop-types

import PropTypes from "prop-types";

// 07-proptypes-all.jsx —— PropTypes 全部常用校验规则一览
import PropTypes from "prop-types";

function DemoComponent({
  name,
  age,
  isAdmin,
  hobbies,
  address,
  onSave,
  status,
  scores,
  config,
  avatar,
  children,
}) {
  // 组件逻辑省略...
  return <div>{/* ... */}</div>;
}

// ============================================================
// 挂载 propTypes 对象 —— 定义每个 prop 的校验规则
// ============================================================
DemoComponent.propTypes = {
  // ---------- 基础类型 ----------
  name: PropTypes.string, // 字符串
  age: PropTypes.number, // 数字（包括整数和小数）
  isAdmin: PropTypes.bool, // 布尔值（true / false）

  // ---------- 引用类型 ----------
  hobbies: PropTypes.array, // 数组（不关心数组里是什么）
  address: PropTypes.object, // 对象（不关心对象里有什么属性）
  onSave: PropTypes.func, // 函数

  // ---------- React 专用类型 ----------
  avatar: PropTypes.element, // 一个 React 元素（如 <img />、<div />）
  children: PropTypes.node, // 可渲染的内容（文字、元素、数组、数字等，最宽泛）

  // ---------- 枚举类型（限定可选值范围） ----------
  status: PropTypes.oneOf(["active", "inactive", "pending"]),
  // 只能是这三个字符串之一，传其他值 → 警告

  // ---------- 数组元素类型校验 ----------
  scores: PropTypes.arrayOf(PropTypes.number),
  // 必须是数组，且数组里每个元素都是数字

  // ---------- 对象结构校验 ----------
  config: PropTypes.shape({
    // shape：对象必须包含指定的属性
    title: PropTypes.string.isRequired, // 嵌套属性也可以加 isRequired
    width: PropTypes.number,
    height: PropTypes.number,
  }),

  // ---------- 必填（加 .isRequired） ----------
  name: PropTypes.string.isRequired, // name 必须传，且必须是字符串
};

// ============================================================
// 设置默认值（可选属性没有传值时使用）
// ============================================================
DemoComponent.defaultProps = {
  isAdmin: false, // 不传时默认为 false
  hobbies: [], // 不传时默认为空数组
  status: "active", // 不传时默认为 "active"
};

export default DemoComponent;

// 08-parent-to-child.tsx —— 可直接复制运行
// 演示父组件向子组件传递各种类型的数据
import React from "react";

// ==================== 子组件：展示所有类型的 props ====================
interface ShowcaseProps {
  // --- 基础类型 ---
  title: string; // 字符串
  count: number; // 数字
  isPublished: boolean; // 布尔

  // --- 引用类型 ---
  tags: string[]; // 字符串数组
  author: {
    // 对象
    name: string;
    avatar: string;
  };
  onSave: (title: string) => void; // 函数（回调）
}

function Showcase({
  title,
  count,
  isPublished,
  tags,
  author,
  onSave,
}: ShowcaseProps) {
  return (
    <div
      style={{
        border: "1px solid #ddd",
        borderRadius: 8,
        padding: 16,
        maxWidth: 400,
      }}
    >
      <h3>{title}</h3>
      <p>阅读量：{count}</p>
      <p>状态：{isPublished ? "已发布" : "草稿"}</p>

      {/* 数组的渲染 */}
      <div>
        标签：
        {tags.map((tag, index) => (
          <span
            key={index}
            style={{
              marginLeft: 4,
              padding: "2px 8px",
              background: "#e3f2fd",
              borderRadius: 4,
              fontSize: 12,
            }}
          >
            {tag}
          </span>
        ))}
      </div>

      {/* 对象属性的使用 */}
      <div style={{ marginTop: 8 }}>
        作者：
        <img
          src={author.avatar}
          alt={author.name}
          style={{
            width: 24,
            height: 24,
            borderRadius: "50%",
            verticalAlign: "middle",
          }}
        />
        <span style={{ marginLeft: 4 }}>{author.name}</span>
      </div>

      {/* 调用函数类型的 prop */}
      <button onClick={() => onSave(title)} style={{ marginTop: 8 }}>
        保存文章
      </button>
    </div>
  );
}

// ==================== 父组件：准备数据并传递 ====================
function App() {
  // 模拟从数据库或 API 获取的数据
  const articleData = {
    title: "React Props 完全指南",
    count: 1280,
    isPublished: true,
    tags: ["React", "TypeScript", "前端"],
    author: {
      name: "小明老师",
      avatar: "https://i.pravatar.cc/150?img=3",
    },
  };

  // 回调函数：处理子组件的"上报"
  const handleSave = (title: string) => {
    alert(`文章《${title}》已保存！`);
  };

  return (
    <div style={{ padding: 20 }}>
      {/* ===== 方式一：逐属性传递（最常见） ===== */}
      <Showcase
        title={articleData.title} // 字符串：直接传
        count={articleData.count} // 数字：必须用 {} 包裹
        isPublished={articleData.isPublished} // 布尔：必须用 {} 包裹
        tags={articleData.tags} // 数组：用 {} 包裹
        author={articleData.author} // 对象：用 {} 包裹
        onSave={handleSave} // 函数：用 {} 包裹（不要加 ()，加括号就变成调用后传返回值了！）
      />

      <hr style={{ margin: "20px 0" }} />

      {/* ===== 方式二：展开运算符批量传递 ===== */}
      <Showcase {...articleData} onSave={handleSave} />
      {/*          └── ...articleData 等价于逐条写出每个属性 */}
      {/* 注意：onSave 不在 articleData 里，需要单独传 */}
    </div>
  );
}

export default App;

// 09-receive-props.tsx —— 子组件接收 Props 的四种方式

// ===== 方式一：接收整个 props 对象（不推荐，但要知道） =====
function WelcomeV1(props) {
  // props 是一个对象，装着所有传入的属性
  return <h1>你好，{props.name}！</h1>;
  //                  └── 每次用都要写 props.xxx，很繁琐
}

// ===== 方式二：参数位置直接解构（推荐⭐） =====
function WelcomeV2({ name, age }) {
  // 在函数签名的参数位置就解构，相当于：
  // const { name, age } = props;
  return (
    <div>
      <h1>你好，{name}！</h1>
      <p>年龄：{age} 岁</p>
    </div>
  );
}

// ===== 方式三：解构 + 默认值（推荐⭐⭐） =====
function WelcomeV3({ name, age = 18, isVip = false }) {
  //                            └── 默认值：父组件不传时使用
  return (
    <div>
      <h1>你好，{name}！</h1>
      <p>年龄：{age} 岁</p>
      <p>{isVip ? "VIP 用户" : "普通用户"}</p>
    </div>
  );
}

// ===== 方式四：剩余参数收集（rest props） =====
function WelcomeV4({ name, ...restProps }) {
  // 解构出 name，剩余的所有属性打包进 restProps 对象
  console.log("剩余属性：", restProps);
  // 比如 <WelcomeV4 name="小明" age={18} city="北京" />
  // restProps = { age: 18, city: "北京" }

  return (
    <div>
      <h1>你好，{name}！</h1>
      {/* 把剩余属性直接展开传给原生 HTML 元素 */}
      <div {...restProps}>其他信息区域</div>
    </div>
  );
}

// 10-children-prop.tsx —— 可直接复制运行
// children 的四种经典用法

// ===== 用法一：基础容器组件 =====
interface CardProps {
  title: string; // 卡片标题
  children?: React.ReactNode; // 卡片内容（写在标签之间）
}

function Card({ title, children }: CardProps) {
  return (
    <div
      style={{
        border: "1px solid #e0e0e0",
        borderRadius: 12,
        overflow: "hidden",
      }}
    >
      {/* 标题栏 */}
      <div
        style={{
          padding: "12px 16px",
          backgroundColor: "#f5f5f5",
          fontWeight: "bold",
        }}
      >
        {title}
      </div>
      {/* 内容区 —— children 在这里渲染 */}
      <div style={{ padding: 16 }}>{children}</div>
    </div>
  );
}

// ===== 用法二：多插槽（多个 children 区域） =====
interface LayoutProps {
  header?: React.ReactNode; // 头部插槽
  sidebar?: React.ReactNode; // 侧边栏插槽
  children?: React.ReactNode; // 主内容区（默认 children）
  footer?: React.ReactNode; // 底部插槽
}

function Layout({ header, sidebar, children, footer }: LayoutProps) {
  return (
    <div
      style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}
    >
      {/* 头部 */}
      {header && (
        <header
          style={{ padding: 16, backgroundColor: "#1976D2", color: "white" }}
        >
          {header}
        </header>
      )}

      <div style={{ display: "flex", flex: 1 }}>
        {/* 侧边栏 */}
        {sidebar && (
          <aside
            style={{
              width: 200,
              padding: 16,
              backgroundColor: "#f5f5f5",
              borderRight: "1px solid #e0e0e0",
            }}
          >
            {sidebar}
          </aside>
        )}

        {/* 主内容 */}
        <main style={{ flex: 1, padding: 16 }}>{children}</main>
      </div>

      {/* 底部 */}
      {footer && (
        <footer
          style={{
            padding: 16,
            backgroundColor: "#f5f5f5",
            borderTop: "1px solid #e0e0e0",
            textAlign: "center",
          }}
        >
          {footer}
        </footer>
      )}
    </div>
  );
}

// ===== 用法三：对 children 进行遍历/克隆操作 =====
interface ButtonGroupProps {
  children: React.ReactNode;
  direction?: "row" | "column"; // 排列方向
}

function ButtonGroup({ children, direction = "row" }: ButtonGroupProps) {
  return (
    <div style={{ display: "flex", flexDirection: direction, gap: 8 }}>
      {/* React.Children.map：安全地遍历 children（即使只有一个子元素也能正确处理） */}
      {React.Children.map(children, (child, index) => {
        // 给每个子元素包裹一层间距 + 添加序号标记
        return (
          <div
            key={index}
            style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
          >
            <span style={{ fontSize: 10, color: "#999" }}>{index + 1}</span>
            {child}
          </div>
        );
      })}
    </div>
  );
}

// ===== 用法四：children 作为函数（Render Props 模式，进阶用法） =====
interface ToggleProps {
  children: (isOn: boolean, toggle: () => void) => React.ReactNode;
  //         └── children 是一个函数！接收状态和操作方法，返回 UI
}

function Toggle({ children }: ToggleProps) {
  const [isOn, setIsOn] = React.useState(false);
  const toggle = () => setIsOn((prev) => !prev);

  // 调用 children 函数，把状态和控制权交给父组件
  return <>{children(isOn, toggle)}</>;
}

// ==================== 综合使用示例 ====================
function App() {
  return (
    <div style={{ padding: 20, maxWidth: 600, margin: "0 auto" }}>
      {/* 用法一：基础容器 */}
      <Card title="📌 用户协议">
        <p>欢迎使用本产品。请仔细阅读以下条款...</p>
        <p>使用本产品即表示您同意以上条款。</p>
      </Card>

      <div style={{ height: 20 }} />

      {/* 用法二：多插槽布局 */}
      <Layout
        header={<nav>网站 Logo | 导航1 | 导航2</nav>}
        sidebar={
          <ul>
            <li>菜单项 1</li>
            <li>菜单项 2</li>
            <li>菜单项 3</li>
          </ul>
        }
        footer="© 2026 我的网站 · 版权所有"
      >
        <h2>欢迎来到主内容区</h2>
        <p>这里是页面的主要内容。</p>
      </Layout>

      <div style={{ height: 20 }} />

      {/* 用法三：遍历 children */}
      <ButtonGroup>
        <button>按钮A</button>
        <button>按钮B</button>
        <button>按钮C</button>
      </ButtonGroup>

      <div style={{ height: 20 }} />

      {/* 用法四：children 作为函数 */}
      <Toggle>
        {(isOn, toggle) => (
          <div
            onClick={toggle}
            style={{
              display: "inline-block",
              padding: "8px 24px",
              borderRadius: 20,
              cursor: "pointer",
              backgroundColor: isOn ? "#4CAF50" : "#ccc",
              color: "white",
              userSelect: "none",
              transition: "background-color 0.3s",
            }}
          >
            {isOn ? "开" : "关"}
          </div>
        )}
      </Toggle>
    </div>
  );
}

export default App;

// 11-destructure-best-practice.tsx —— Props 解构的六大最佳实践

// ===== 实践一：参数位置解构 + 默认值（最推荐） =====
// ✅ 好处：一眼看出需要哪些 props，默认值就近声明
function UserInfo({
  name,
  age = 0, // 数字默认值
  isAdmin = false, // 布尔默认值
  hobbies = [], // 数组默认值（注意：不能用 null！）
  avatar = "https://i.pravatar.cc/150?img=1", // 字符串默认值
}) {
  return (
    <div>
      <img src={avatar} alt={name} />
      <h3>
        {name}（{age} 岁）
      </h3>
    </div>
  );
}

// ===== 实践二：嵌套对象的深层解构 =====
// ✅ 适合需要取出嵌套对象中多个属性的场景
function AddressCard({
  user: {
    name,
    address: { city, district }, // 深层解构：直接拿到 city 和 district
  },
}: {
  user: {
    name: string;
    address: { city: string; district: string };
  };
}) {
  return (
    <div>
      <p>姓名：{name}</p>
      <p>
        地址：{city} {district}
      </p>
    </div>
  );
}

// ===== 实践三：重命名解构（alias） =====
// ✅ 适合 props 名与组件内部变量名冲突时
function FormField({
  name: fieldName, // 重命名：props 叫 name，组件里用 fieldName（避免和 HTML name 属性混淆）
  value: fieldValue, // 重命名：props 叫 value，组件里用 fieldValue
}) {
  return <input name={fieldName} defaultValue={fieldValue} />;
}

// ===== 实践四：剩余参数 rest props（传给原生元素时特别有用） =====
// ✅ 自己处理特定的 prop，剩余的透传给底层 HTML 元素
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  //                           └── 继承 HTML input 元素的所有原生属性类型
  label: string; // 额外增加的自定义 prop
}

function LabeledInput({ label, id, ...inputProps }: InputProps) {
  //                            └── 收集剩余所有属性（className, placeholder, value, onChange 等）
  const uniqueId = id || label; // 如果没有传 id，就用 label 作为 id
  return (
    <div style={{ marginBottom: 12 }}>
      <label htmlFor={uniqueId} style={{ display: "block", marginBottom: 4 }}>
        {label}
      </label>
      <input
        id={uniqueId}
        {...inputProps} // 把所有剩余属性展开传给原生 input
        style={{
          padding: "8px 12px",
          border: "1px solid #ccc",
          borderRadius: 4,
          width: "100%",
        }}
      />
    </div>
  );
}

// ===== 实践五：Props 解构 + TypeScript 类型 =====
interface ProductCardProps {
  product: {
    id: number;
    name: string;
    price: number;
    inStock: boolean;
  };
  onBuy: (productId: number) => void;
}

function ProductCard({
  product: { id, name, price, inStock },
  onBuy,
}: ProductCardProps) {
  //                     └── 解构 + 重命名同时进行
  return (
    <div>
      <h4>{name}</h4>
      <p>¥{price}</p>
      <button disabled={!inStock} onClick={() => onBuy(id)}>
        {inStock ? "立即购买" : "缺货"}
      </button>
    </div>
  );
}

// ===== 实践六：不要解构你不用的 props =====
// ❌ 坏习惯：解构了一大堆，只用了其中一两个
function BadExample({ name, age, city, hobby, job, ...rest }) {
  // 只有 name 被用了，其他的解构都是浪费
  return <h1>{name}</h1>;
}

// ✅ 好习惯：只解构你需要的
function GoodExample(props: { name: string }) {
  // 或者直接 { name }
  return <h1>{props.name}</h1>;
}

父组件的 state
      │
      │  传给子组件（通过 props）
      ▼
子组件的 props  ← 这个值是父组件"借"给子组件看的
      │
      │  如果子组件改了 props...
      ▼
父组件的 state 不会跟着变！数据不一致，Bug 的温床。

// 12-immutable-props.tsx —— Props 只读性：错误 vs 正确对比

// ===== 场景：子组件收到一个用户对象，想要显示大写的名字 =====

// ❌ 错误做法一：直接修改 props 对象的属性
function UserBad1({ user }: { user: { name: string } }) {
  user.name = user.name.toUpperCase(); // ❌ 直接改 props！
  // TypeScript 模式下此处会报编译错误
  return <h1>{user.name}</h1>;
}

// ❌ 错误做法二：试图重新给解构出的变量赋值
function UserBad2({ name }: { name: string }) {
  name = name.toUpperCase(); // ❌ 虽然 JS 允许，但这改了局部变量，不是改 props
  // 问题是：这会让代码阅读者以为 props 被修改了
  return <h1>{name}</h1>;
}

// ✅ 正确做法一：创建新的局部变量
function UserGood1({ user }: { user: { name: string } }) {
  const displayName = user.name.toUpperCase(); // ✅ 新变量，不动 props
  return <h1>{displayName}</h1>;
}

// ✅ 正确做法二：在 JSX 中直接计算（适合简单变换）
function UserGood2({ user }: { user: { name: string } }) {
  return <h1>{user.name.toUpperCase()}</h1>; // ✅ 只是读取，没有修改
}

// ✅ 正确做法三：用 useMemo 缓存计算结果（适合复杂计算）
function UserGood3({
  user,
}: {
  user: { firstName: string; lastName: string };
}) {
  const fullName = React.useMemo(
    () => `${user.lastName} ${user.firstName}`.toUpperCase(),
    //                    └── useMemo：只在依赖变化时重新计算
    [user.firstName, user.lastName], // 依赖数组
  );
  return <h1>{fullName}</h1>;
}

// ✅ 正确做法四：需要"修改"数据时，调用父组件传来的回调函数
function UserGood4({
  user,
  onUpdateName, // 父组件传来的回调函数
}: {
  user: { id: number; name: string };
  onUpdateName: (id: number, newName: string) => void;
}) {
  const handleRename = () => {
    const newName = prompt("请输入新名字：", user.name);
    if (newName && newName !== user.name) {
      onUpdateName(user.id, newName); // ✅ 通知父组件去改，自己不碰数据
    }
  };

  return (
    <div>
      <span>{user.name}</span>
      <button onClick={handleRename}>改名</button>
    </div>
  );
}

// 13-rerender-mechanism.tsx —— 子组件重渲染触发机制
import React, { useState } from "react";

// ===== 子组件 =====
function Child({ name, age }: { name: string; age: number }) {
  console.log(`Child 渲染了：name=${name}, age=${age}`);
  // 每次渲染都会打印，方便观察
  return (
    <div>
      {name} - {age} 岁
    </div>
  );
}

// ===== 父组件 =====
function App() {
  const [count, setCount] = useState(0); // 父组件自己的 state
  const [userName, setUserName] = useState("小明"); // 传给子组件的 state

  return (
    <div>
      {/* 情况一：父组件自身的 state 变化 → 父组件重渲染 → 子组件也重渲染 */}
      <p>父组件计数器：{count}</p>
      <button onClick={() => setCount(count + 1)}>count +1</button>

      {/* 情况二：传给子组件的 props 变化 → 子组件重渲染 */}
      <p>用户名：{userName}</p>
      <button
        onClick={() => setUserName(userName === "小明" ? "小红" : "小明")}
      >
        切换用户
      </button>

      <hr />
      <Child name={userName} age={25} />

      <hr />

      {/* 情况三：父组件 state 变化，但子组件的 props 没变 → 子组件仍然会重渲染！ */}
      {/* 这就是为什么需要 React.memo 来优化 */}
      <Child name="固定的名字" age={30} />
      {/* 点击 count+1 按钮时，这个 Child 也会重渲染，即使它的 props（name、age）完全没变！ */}
    </div>
  );
}

export default App;

// 14-memo-optimization.tsx —— 使用 React.memo 阻止不必要的重渲染
import React, { useState } from "react";

// ===== 用 React.memo 包裹子组件 =====
// React.memo 的作用：如果 props 没变，就跳过重渲染（复用上次的结果）
const MemoizedChild = React.memo(function Child({ name }: { name: string }) {
  console.log("MemoizedChild 渲染：", name);
  // 只有 name 变化时才会打印
  return <div>姓名：{name}</div>;
});

// 也可以写成这样：
// function Child({ name }: { name: string }) { ... }
// const MemoizedChild = React.memo(Child);

function App() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("小明");

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>count +1</button>
      {/* 点击这个按钮 → 父组件重渲染 → 但 MemoizedChild 的 props（name）没变 → 不重渲染！ */}

      <button onClick={() => setName(name === "小明" ? "小红" : "小明")}>
        切换名字
      </button>
      {/* 点击这个按钮 → name 变了 → MemoizedChild 重渲染 */}

      <hr />
      <MemoizedChild name={name} />
      {/* 另一个实例：name 固定不变 → 永远不重渲染 */}
      <MemoizedChild name="固定的名字" />
    </div>
  );
}

export default App;

// 15-default-props.tsx —— 默认 Props 的四种设置方式

// ===== 方式一：解构时给默认值（推荐⭐⭐⭐，最常用） =====
function Greeting({
  name,
  greeting = "你好",
}: {
  name: string;
  greeting?: string;
}) {
  //                            └── 直接在解构位置赋值
  return (
    <p>
      {greeting}，{name}！
    </p>
  );
}

// ===== 方式二：函数体中用 || 或 ?? 设置默认值 =====
function GreetingV2({ name, greeting }: { name: string; greeting?: string }) {
  const finalGreeting = greeting ?? "你好";
  //                         └── ?? 空值合并：只有 null/undefined 时才用默认值
  return (
    <p>
      {finalGreeting}，{name}！
    </p>
  );
}

// ===== 方式三：defaultProps 静态属性（老方式，兼容类组件） =====
function GreetingV3({ name, greeting }: { name: string; greeting?: string }) {
  return (
    <p>
      {greeting}，{name}！
    </p>
  );
}
GreetingV3.defaultProps = {
  greeting: "你好", // 不传 greeting 时使用
};

// ===== 方式四：TypeScript 中的 defaultProps（推荐用方式一替代） =====
interface GreetingProps {
  name: string;
  greeting?: string;
}
function GreetingV4({ name, greeting = "你好" }: GreetingProps) {
  // 直接在解构时给默认值，TS 能正确推断 greeting 不是 undefined
  return (
    <p>
      {greeting}，{name}！
    </p>
  );
}

// ❌ 错误：自定义的 className prop 和 HTML 的 className 属性混了
function Box({ className }) {
  // 你以为 className 是你自定义的逻辑分类，实际上它被当成了 CSS 类名
  return <div className={className}>内容</div>;
}

// 别人使用时：
<Box className="用户管理模块" />;
// → 渲染成 <div class="用户管理模块">  ← 这根本不是合法的 CSS 类名！

// ✅ 正确：自定义 prop 取一个不会冲突的名字
function Box({ category }) {
  // 用 category 表示"业务分类"，className 留给 CSS 样式
  return (
    <div data-category={category}>
      {/* data-* 属性是 HTML 标准中专门用来存自定义数据的 */}
      内容
    </div>
  );
}

<Box category="用户管理模块" />;
// → 渲染成 <div data-category="用户管理模块"> ✅

// ❌ 错误：数字类型的 prop 传了字符串
function AgeDisplay({ age }: { age: number }) {
  return <p>年龄：{age + 1} 岁</p>;
  // age 是字符串 "18" → "18" + 1 = "181"（JS 的字符串拼接！）
}

// 错误调用：
<AgeDisplay age="18" />
//          └── 这就是传了字符串！"18" 不是 18

// ✅ 正确：数字必须用 {} 包裹
<AgeDisplay age={18} />
//          └── {18} → JS 表达式 → 数字 18 → 18 + 1 = 19 ✅

// ❌ 错误：把整个用户对象（含几十个字段）传给只展示姓名的子组件
function UserNameDisplay({ user }: { user: User }) {
  // User 类型可能有 30+ 个字段（id, name, email, phone, address, ...）
  return <span>{user.name}</span>;
  // 只用了 user.name，但整个 user 对象都传进来了
}

// 问题：
// 1. 子组件依赖了整个 User 类型 → 耦合度高
// 2. user 中任何一个字段变化（如 user.lastLoginTime）→ 子组件都重渲染
// 3. 别人看代码不知道这个组件到底需要哪些数据

// ✅ 正确：只传真正需要的字段
function UserNameDisplay({ name }: { name: string }) {
  return <span>{name}</span>;
}

// 调用：
<UserNameDisplay name={user.name} />

// ❌ 错误：把 props 当成 state 用
function Counter({ initialCount }: { initialCount: number }) {
  // 想记录当前计数，于是想"更新" props
  initialCount = initialCount + 1; // ❌ 试图修改 props
  // 或者想用 props 驱动内部状态但每次都重置：
  const [count, setCount] = useState(initialCount);
  // 问题：父组件传不同的 initialCount 时，count 不会自动同步
  // 需要用 useEffect 监听 + key 重置，很麻烦
  return <p>{count}</p>;
}

// ✅ 正确：分清"外部配置"和"内部状态"
// 场景1：计数完全由父组件管理（受控模式）
function Counter({ count, onIncrement }: { count: number; onIncrement: () => void }) {
  return (
    <div>
      <span>{count}</span>
      <button onClick={onIncrement}>+1</button>
    </div>
  );
}

// 场景2：计数由子组件自己管理，但 props 提供一个初始值
function Counter({ initialCount = 0 }: { initialCount?: number }) {
  const [count, setCount] = useState(initialCount);
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount((c) => c + 1)}>+1</button>
    </div>
  );
}

// ❌ 错误：直接操作了 props 中的数组
function TodoList({ items, onUpdate }: { items: { text: string; done: boolean }[]; onUpdate: (items: any[]) => void }) {
  const handleMarkAllDone = () => {
    // ❌ 遍历并直接修改了 props 中的对象属性！
    items.forEach((item) => {
      item.done = true; // props 中对象的属性被改了！
    });
    onUpdate(items); // 引用没变，父组件可能检测不到
  };

  return (
    <div>
      <button onClick={handleMarkAllDone}>全部完成</button>
      {items.map((item, i) => (
        <div key={i}>{item.text}</div>
      ))}
    </div>
  );
}

// ✅ 正确：创建全新的数组和对象
function TodoListGood({ items }: { items: { text: string; done: boolean }[] }) {
  const handleMarkAllDone = () => {
    // ✅ 创建新数组，每个元素也是新对象
    const newItems = items.map((item) => ({
      ...item, // 浅拷贝原对象的所有属性
      done: true, // 覆盖 done 属性
    }));
    // 通过回调通知父组件，而不是直接改
    // onUpdate(newItems);
  };

  return (
    <div>
      <button onClick={handleMarkAllDone}>全部完成</button>
      {items.map((item, i) => (
        <div key={i}>{item.text}</div>
      ))}
    </div>
  );
}

// ❌ 错误：传函数时加了括号 → 传的是函数的返回值，不是函数本身
function App() {
  const handleClick = () => alert("点击了！");

  return (
    <div>
      {/* ❌ 页面加载时就弹窗了！因为 handleClick() 在渲染时就被调用了 */}
      <button onClick={handleClick()}>点我</button>
      {/* 这个 onClick 收到的值是 undefined（handleClick 没有返回值） */}

      {/* ✅ 正确一：传函数引用（函数本身） */}
      <button onClick={handleClick}>点我</button>

      {/* ✅ 正确二：需要传参时，用箭头函数包裹 */}
      <button onClick={() => handleClick("参数1")}>点我带参</button>
    </div>
  );
}

// 记忆技巧：
// onClick={handleClick}      → 把函数本身交给 React，等点击时 React 调用它
// onClick={handleClick()}    → 在渲染时立即调用函数，把返回值交给 React（通常不是你想要的）
// onClick={() => handleClick("x")}  → 传一个箭头函数，等点击时才会执行 handleClick("x")