// 就像从乐高盒子里拿出"窗户"和"门"两块积木
<Window color="blue" size="medium" />
<Door color="brown" width="double" />

// 拼在一起就组成了一面墙
<div className="house-wall">
  <Window color="blue" size="medium" />
  <Door color="brown" width="double" />
</div>

// 定义一次 Button 组件（刻一枚"印章"）
function Button({ text, type }) {
  return <button className={`btn btn-${type}`}>{text}</button>;
}

// 到处使用（到处盖章）
function App() {
  return (
    <div>
      <Button text="保存" type="primary" /> {/* 蓝色主按钮 */}
      <Button text="取消" type="default" /> {/* 灰色默认按钮 */}
      <Button text="删除" type="danger" /> {/* 红色危险按钮 */}
    </div>
  );
}

function Counter() {
  const [count, setCount] = useState(0); // Counter 自己的"私有财产"
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// 页面上放三个 Counter，它们是三个独立实例
function App() {
  return (
    <div>
      <Counter /> {/* 这个 count 是自己的 */}
      <Counter /> {/* 这个也是自己的，互不影响 */}
      <Counter /> {/* 同上 */}
    </div>
  );
}
// 点击第一个按钮，只有第一个数字会变 —— 这就是"独立性"

// 第一层：原子组件（词语）
function Avatar({ src }) {
  return <img src={src} />;
}
function UserName({ name }) {
  return <span>{name}</span>;
}

// 第二层：组合组件（句子）
function UserCard({ user }) {
  return (
    <div>
      <Avatar src={user.avatar} />
      <UserName name={user.name} />
    </div>
  );
}

// 第三层：页面组件（章节）
function UserListPage() {
  const users = [
    { id: 1, name: "小明" },
    { id: 2, name: "小红" },
  ];
  return (
    <div>
      {users.map((user) => (
        <UserCard key={user.id} user={user} />
      ))}
    </div>
  );
}

// ❌ 类组件（了解即可，不要求掌握）
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // 必须手动绑定 this！
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <h1>你好，{this.props.name}</h1>
        <p>计数：{this.state.count}</p>
        <button onClick={this.handleClick}>+1</button>
      </div>
    );
  }
}

// ✅ 函数组件（现代推荐写法）
function Welcome({ name }) {
  const [count, setCount] = useState(0); // 一行搞定状态
  return (
    <div>
      <h1>你好，{name}</h1>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

// 第1行：导入 React（React 17+ 新 JSX 转换可省略，保留最安全）
import React from "react";

// 第2-12行：定义一个函数组件
//        ┌── function 关键字
//        │      ┌── 组件名（首字母必须大写！）
//        │      │
function HelloWorld() {
  //    │
  //    └── 函数体：在这里写组件的逻辑

  // return 后面是 JSX —— 描述组件"长什么样"
  return (
    <div>
      {/* JSX 中的注释要这样写 */}
      <h1>Hello, World!</h1>
      <p>这是我的第一个 React 组件</p>
    </div>
  );
}

// 最后一行：导出组件，让其他文件可以 import 使用
export default HelloWorld;

import HelloWorld from "./components/HelloWorld"; // 引入

function App() {
  return (
    <div>
      <HelloWorld /> {/* 像使用 HTML 标签一样用！ */}
      <HelloWorld /> {/* 可以用多次 */}
    </div>
  );
}

// props 是一个对象，装着调用者传来的所有数据
function Welcome(props) {
  // 比如 <Welcome name="小明" visitCount={1} />
  // props = { name: "小明", visitCount: 1 }

  return (
    <div>
      <h1>你好，{props.name}！</h1>
      <p>欢迎你第 {props.visitCount} 次访问。</p>
    </div>
  );
}

// 使用
function App() {
  return (
    <div>
      <Welcome name="小明" visitCount={1} />
      <Welcome name="小红" visitCount={5} />
      <Welcome name="小刚" visitCount={99} />
    </div>
  );
}
// 渲染结果：
// 你好，小明！欢迎你第 1 次访问。
// 你好，小红！欢迎你第 5 次访问。
// 你好，小刚！欢迎你第 99 次访问。

// 写法一（基础）：用 props 对象
function Welcome(props) {
  return <h1>你好，{props.name}！</h1>;
}

// 写法二（推荐）：在参数位置直接解构
function Welcome({ name, visitCount }) {
  //            └── 相当于 const { name, visitCount } = props;
  return (
    <div>
      <h1>你好，{name}！</h1>
      <p>第 {visitCount} 次访问</p>
    </div>
  );
}

function Welcome({ name }) {
  // ❌ 绝对不能这样！props 是只读的！
  // name = "李四";

  // ✅ 如果需要转换，存到新变量
  const upperName = name.toUpperCase();
  return <h1>你好，{upperName}！</h1>;
}

import React from "react";
import PropTypes from "prop-types"; // React 19 + Vite 自带，无需额外安装

// 第一步：定义组件
function UserCard({ name, age, isAdmin, hobbies, onDelete }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>年龄：{age} 岁</p>
      <p>身份：{isAdmin ? "管理员" : "普通用户"}</p>
      <p>爱好：{hobbies.join("、")}</p>
      <button onClick={onDelete}>删除</button>
    </div>
  );
}

// 第二步：挂载 propTypes —— 告诉"门卫"规则
UserCard.propTypes = {
  name: PropTypes.string.isRequired, // 字符串 + 必填
  age: PropTypes.number.isRequired, // 数字 + 必填
  isAdmin: PropTypes.bool, // 布尔值，可选
  hobbies: PropTypes.array, // 数组，可选
  onDelete: PropTypes.func, // 函数，可选
};

// 第三步：设置默认值
UserCard.defaultProps = {
  isAdmin: false,
  hobbies: [],
};

export default UserCard;

// 传错类型时，控制台会警告（不阻止运行，只在开发环境提示）
<UserCard name={123} age="十八岁" />
// Warning: Failed prop type: Invalid prop `name` of type `number`
//          supplied to `UserCard`, expected `string`.

import React, { useState } from "react"; // 第一步：导入 useState

function Counter() {
  // 第二步：调用 useState
  // ┌── 状态变量名           ┌── 初始值（可以是数字、字符串、对象、数组）
  // │                         │
  // │            ┌── 更新函数（命名惯例 = set + 变量名首字母大写）
  // │            │
  const [count, setCount] = useState(0);
  //    │        │               │
  //    │        │               └── useState(初始值)：返回 [当前值, 更新函数]
  //    │        └── 第二个元素：更新状态的函数，调用它才会触发重新渲染
  //    └── 第一个元素：当前的状态值

  return (
    <div>
      <p>你点击了 {count} 次</p>
      {/* 第三步：通过 setXxx 更新状态 */}
      <button onClick={() => setCount(count + 1)}>点我 +1</button>
      <button onClick={() => setCount(0)}>归零</button>
    </div>
  );
}
// 每次点击按钮 → setCount(新值) → React 重新渲染 → 页面数字更新

const [count, setCount] = useState(0);
//     └─────────────────┘ 这叫"数组解构赋值"
//     useState(0) 返回 [0, function]
//       count = 返回数组的第0个元素（当前值）
//       setCount = 返回数组的第1个元素（更新函数）
//     等价于：
//       const stateArray = useState(0);
//       const count = stateArray[0];
//       const setCount = stateArray[1];

// ❌ 不能直接改 count
// count = count + 1;       这样写不会触发重新渲染！

// ✅ 必须通过 setCount
// setCount(count + 1);     正确做法

// ❌ 错误：在普通函数中使用
function normalFunction() {
  const [value, setValue] = useState(0); // 报错！
}

// ✅ 正确：在组件函数中使用
function MyComponent() {
  const [value, setValue] = useState(0); // 没问题
  return <div>{value}</div>;
}

// ❌ 错误：useState 在 if 里面
function Bad({ isAdmin }) {
  if (isAdmin) {
    const [data, setData] = useState(null); // 报错！
  }
}

// ❌ 错误：useState 在循环里
function Bad() {
  for (let i = 0; i < 5; i++) {
    const [val, setVal] = useState(i); // 报错！
  }
}

// ✅ 正确：始终在顶层
function Good({ isAdmin }) {
  const [data, setData] = useState(null); // 第1个Hook，始终在这里

  useEffect(() => {
    if (isAdmin) fetchData().then(setData); // 条件逻辑放 Hook 里面
  }, [isAdmin]);

  return <div>...</div>;
}

function Demo() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // ❌ 打印的还是 0！不是 1！
    // setCount 只是"安排"了更新，更新不会立刻发生
  };

  // ✅ 如果需要基于上一次的值更新，用函数式更新
  const handleClickSafe = () => {
    setCount((prevCount) => {
      //  prevCount 是 React 保证的最新值
      return prevCount + 1;
    });
  };

  return <button onClick={handleClick}>count = {count}</button>;
}

function UserProfile() {
  const [user, setUser] = useState({
    name: "小明",
    age: 18,
    hobbies: ["篮球", "编程"],
  });

  const handleBirthday = () => {
    // ❌ 错误：直接改原对象（引用地址没变，React 检测不到）
    // user.age = user.age + 1; setUser(user);

    // ✅ 正确：创建新对象
    setUser({ ...user, age: user.age + 1 });
  };

  const addHobby = (hobby) => {
    // ❌ 错误：user.hobbies.push(hobby); setUser(user);

    // ✅ 正确：创建新数组
    setUser({ ...user, hobbies: [...user.hobbies, hobby] });
  };

  return (
    <div>
      <p>姓名：{user.name}</p>
      <p>年龄：{user.age} 岁</p>
      <p>爱好：{user.hobbies.join("、")}</p>
      <button onClick={handleBirthday}>过生日 +1岁</button>
    </div>
  );
}

import React, { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    //     参数1：副作用函数 —— 组件渲染后执行
    //     参数2：依赖数组   —— 控制何时重新执行（下面这个是空数组）

    console.log("定时器已启动");
    const timerId = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // 返回一个"清理函数" —— 组件卸载时 React 自动调用
    return () => {
      console.log("定时器已清除");
      clearInterval(timerId); // 清除定时器，防止内存泄漏
    };
  }, []);
  //  └── 空数组 = "只在组件首次挂载时执行一次"

  return <p>你在这个页面停留了 {seconds} 秒</p>;
}

// 情况一：不传依赖数组 —— 每次渲染都执行（⚠️ 容易死循环）
useEffect(() => {
  console.log("每次渲染都执行");
});

// 情况二：传空数组 [] —— 只在首次挂载时执行一次
useEffect(() => {
  console.log("只执行一次");
  // 适合：初始化请求、事件绑定
}, []);

// 情况三：传有值的数组 [a, b] —— 首次 + 依赖项变化时执行
useEffect(() => {
  document.title = `你点击了 ${count} 次`;
}, [count]); // count 变化 → 重新执行

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchUsers() {
      try {
        setLoading(true);
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users",
        );
        if (!response.ok) throw new Error("网络请求失败");
        const data = await response.json();
        setUsers(data);
        setError(null);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchUsers();
  }, []); // 只在首次挂载时执行

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

  return (
    <div>
      <h2>用户列表（来自网络请求）</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} — {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

// ==================== TodoItem 组件 ====================
// 作用：渲染单条待办事项，支持勾选完成、双击编辑、删除
// props：
//   id        - 事项的唯一标识
//   text      - 事项的文字内容
//   completed - 是否已完成
//   onToggle  - 勾选/取消勾选时的回调
//   onDelete  - 删除时的回调
//   onEdit    - 编辑完成时的回调
// ======================================================

function TodoItem({ id, text, completed, onToggle, onDelete, onEdit }) {
  // 状态1：是否处于编辑模式
  const [isEditing, setIsEditing] = useState(false);

  // 状态2：编辑时临时保存的文字
  const [editText, setEditText] = useState(text);

  // 副作用：当外部 text 变化时，同步更新编辑文字
  useEffect(() => {
    setEditText(text);
  }, [text]);

  // 保存编辑
  const handleSave = () => {
    const trimmed = editText.trim();
    if (trimmed === "") {
      onDelete(id); // 空文字 → 删除
    } else if (trimmed !== text) {
      onEdit(id, trimmed); // 有变化 → 通知父组件
    }
    setIsEditing(false);
  };

  // 取消编辑
  const handleCancel = () => {
    setEditText(text); // 恢复原文字
    setIsEditing(false);
  };

  // 键盘：回车保存，Esc 取消
  const handleKeyDown = (e) => {
    if (e.key === "Enter") handleSave();
    if (e.key === "Escape") handleCancel();
  };

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 8,
        padding: 8,
        borderBottom: "1px solid #eee",
        backgroundColor: completed ? "#f0f0f0" : "transparent",
      }}
    >
      {/* 完成状态复选框 */}
      <input
        type="checkbox"
        checked={completed}
        onChange={() => onToggle(id)}
      />

      {/* 编辑模式 / 普通模式切换 */}
      {isEditing ? (
        <>
          <input
            type="text"
            value={editText}
            onChange={(e) => setEditText(e.target.value)}
            onKeyDown={handleKeyDown}
            style={{ flex: 1 }}
            autoFocus
          />
          <button onClick={handleSave}>保存</button>
          <button onClick={handleCancel}>取消</button>
        </>
      ) : (
        <>
          <span
            style={{
              flex: 1,
              textDecoration: completed ? "line-through" : "none",
              cursor: "pointer",
            }}
            onDoubleClick={() => setIsEditing(true)}
          >
            {text}
          </span>
          <button onClick={() => onDelete(id)} style={{ color: "red" }}>
            删除
          </button>
        </>
      )}
    </div>
  );
}

// PropTypes 类型校验
TodoItem.propTypes = {
  id: PropTypes.number.isRequired,
  text: PropTypes.string.isRequired,
  completed: PropTypes.bool,
  onToggle: PropTypes.func.isRequired,
  onDelete: PropTypes.func.isRequired,
  onEdit: PropTypes.func,
};

// 默认值
TodoItem.defaultProps = {
  completed: false,
};

export default TodoItem;

import Header from "./components/Header"; // 从子文件夹导入
import Sidebar from "./Sidebar"; // 从当前目录导入
import Button from "../common/Button"; // 从上级目录导入

import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";

// ===== 定义文件：MyComponents.jsx =====

export default function Header() {
  // 默认导出 —— 一个文件只有一个
  return <header>网站头部</header>;
}

export function Footer() {
  // 命名导出 —— 可以有多个
  return <footer>网站底部</footer>;
}

export function Sidebar() {
  return <aside>侧边栏</aside>;
}

// ===== 使用文件：App.jsx =====

import Header from "./MyComponents"; // 默认导出：不需要花括号
import { Footer, Sidebar } from "./MyComponents"; // 命名导出：必须花括号 + 精确匹配名字
import Header, { Footer, Sidebar } from "./MyComponents"; // 同时导入

<UserCard
  name="小明" // ✅ 字符串：直接用引号
  age={18} // ✅ 数字：必须用 {}，写成 age="18" 就是字符串了！
  isVip={true} // ✅ 布尔：必须用 {}
  score={99.5} // ✅ 小数：也是数字类型，用 {}
/>

function App() {
  const userInfo = {
    name: "小红",
    age: 22,
    address: { city: "北京", district: "朝阳区" },
  };

  return (
    <div>
      {/* 传入整个对象 */}
      <ProfileCard user={userInfo} />

      {/* 展开运算符：把对象属性展开为独立 props */}
      <ProfileCard {...userInfo} />
      {/* 等价于 <ProfileCard name="小红" age={22} address={{city:"北京",...}} /> */}

      {/* 直接写对象字面量 */}
      <Table config={{ columns: 3, bordered: true }} />
    </div>
  );
}

// ===== 父组件 =====
function App() {
  const handleDelete = (userId) => {
    console.log("要删除的用户 ID：", userId);
    // 执行删除逻辑...
  };

  return <UserList onDelete={handleDelete} />; // 把函数作为 props 传入
}

// ===== 子组件 =====
function UserList({ onDelete }) {
  return (
    <ul>
      <li>
        小明
        <button onClick={() => onDelete(1)}>删除</button>
        {/* 子组件不直接改数据，而是"打电话通知"父组件 */}
      </li>
    </ul>
  );
}

// 定义容器组件 —— children 自动包含被包裹的内容
function Card({ title, children }) {
  return (
    <div style={{ border: "1px solid #ccc", borderRadius: 8, padding: 16 }}>
      <h2>{title}</h2>
      <div>{children}</div> {/* 渲染被包裹的内容 */}
    </div>
  );
}

// 使用
function App() {
  return (
    <div>
      <Card title="个人信息">
        <p>姓名：小明</p>
        <p>年龄：18 岁</p>
        <button>编辑资料</button>
      </Card>

      <Card title="最新动态">
        <ul>
          <li>小明发布了一篇文章</li>
          <li>小红点了一个赞</li>
        </ul>
      </Card>
    </div>
  );
}

import React from "react";
import PropTypes from "prop-types";

function UserCard({ avatar, name, age, bio }) {
  return (
    <div
      style={{
        width: 300,
        border: "1px solid #e0e0e0",
        borderRadius: 12,
        padding: 20,
        textAlign: "center",
        boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
        margin: 10,
      }}
    >
      <img
        src={avatar}
        alt={`${name} 的头像`}
        style={{
          width: 80,
          height: 80,
          borderRadius: "50%",
          objectFit: "cover",
        }}
      />
      <h3 style={{ margin: "12px 0 4px" }}>{name}</h3>
      <p style={{ color: "#888", fontSize: 14 }}>{age} 岁</p>
      {/* 有 bio 才显示，没有就不渲染 */}
      {bio && (
        <p style={{ marginTop: 12, fontSize: 14, color: "#555" }}>{bio}</p>
      )}
    </div>
  );
}

UserCard.propTypes = {
  avatar: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  bio: PropTypes.string, // 可选
};

export default UserCard;

// 使用示例
import UserCard from "./components/UserCard";

function App() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap" }}>
      <UserCard
        avatar="https://i.pravatar.cc/150?img=1"
        name="小明"
        age={18}
        bio="热爱编程的00后，喜欢篮球和吉他"
      />
      <UserCard
        avatar="https://i.pravatar.cc/150?img=5"
        name="小红"
        age={22}
        bio="设计师一枚，对一切美的事物感兴趣"
      />
      <UserCard
        avatar="https://i.pravatar.cc/150?img=3"
        name="小刚"
        age={27}
        // 故意不传 bio —— 简介区域不会显示
      />
    </div>
  );
}

import React, { useState } from "react";

function LikeCounter() {
  const [count, setCount] = useState(0); // 状态1：点赞数
  const [logs, setLogs] = useState([]); // 状态2：操作日志

  const handleLike = () => {
    setCount((prev) => prev + 1); // 函数式更新
    setLogs((prev) => [...prev, "赞 +1"]); // 不可变追加
  };

  const handleDislike = () => {
    setCount((prev) => prev - 1);
    setLogs((prev) => [...prev, "踩 -1"]);
  };

  const handleReset = () => {
    setCount(0);
    setLogs([]);
  };

  return (
    <div
      style={{
        width: 300,
        padding: 20,
        border: "1px solid #ddd",
        borderRadius: 12,
        textAlign: "center",
      }}
    >
      <div style={{ fontSize: 48, fontWeight: "bold", margin: "16px 0" }}>
        {count}
      </div>
      <p style={{ color: "#888" }}>
        {count > 0 ? "正向" : count < 0 ? "负向" : "当前为零"}
      </p>

      <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
        <button onClick={handleLike}>赞 +1</button>
        <button onClick={handleDislike}>踩 -1</button>
        <button onClick={handleReset} style={{ color: "#999" }}>
          重置
        </button>
      </div>

      {logs.length > 0 && (
        <div
          style={{
            marginTop: 16,
            textAlign: "left",
            fontSize: 13,
            color: "#666",
          }}
        >
          <p style={{ fontWeight: "bold" }}>操作日志：</p>
          {logs.map((log, i) => (
            <div key={i}>
              {i + 1}. {log}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default LikeCounter;

import React, { useState, useEffect } from "react";

const ALL_PRODUCTS = [
  { id: 1, name: "MacBook Pro", category: "电脑", price: 12999 },
  { id: 2, name: "iPhone 15", category: "手机", price: 6999 },
  { id: 3, name: "AirPods Pro", category: "耳机", price: 1899 },
  { id: 4, name: "iPad Air", category: "平板", price: 4799 },
  { id: 5, name: "Apple Watch", category: "手表", price: 2999 },
  { id: 6, name: "Mac Mini", category: "电脑", price: 4499 },
  { id: 7, name: "iPhone SE", category: "手机", price: 3499 },
  { id: 8, name: "Magic Keyboard", category: "配件", price: 899 },
];

function ProductSearch() {
  const [searchTerm, setSearchTerm] = useState(""); // 搜索词
  const [filtered, setFiltered] = useState(ALL_PRODUCTS); // 筛选结果

  // 搜索词变化 → 重新筛选
  useEffect(() => {
    const term = searchTerm.toLowerCase().trim();
    if (term === "") {
      setFiltered(ALL_PRODUCTS); // 空搜索 → 显示全部
    } else {
      setFiltered(
        ALL_PRODUCTS.filter(
          (p) =>
            p.name.toLowerCase().includes(term) ||
            p.category.toLowerCase().includes(term),
        ),
      );
    }
  }, [searchTerm]);

  const formatPrice = (price) => "¥" + price.toLocaleString("zh-CN");

  return (
    <div style={{ maxWidth: 500, margin: "0 auto", padding: 20 }}>
      <h2>商品搜索</h2>

      <input
        type="text"
        placeholder="输入商品名称或类别..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        style={{
          width: "100%",
          padding: "10px 12px",
          fontSize: 16,
          border: "1px solid #ccc",
          borderRadius: 8,
          marginBottom: 16,
          boxSizing: "border-box",
        }}
      />

      <p style={{ color: "#888", fontSize: 14 }}>
        共 {filtered.length} 件商品
        {searchTerm && `（搜索："${searchTerm}"）`}
      </p>

      {filtered.length === 0 ? (
        <p style={{ textAlign: "center", color: "#999", padding: "40px 0" }}>
          没有找到匹配的商品
        </p>
      ) : (
        filtered.map((product) => (
          <div
            key={product.id}
            style={{
              display: "flex",
              justifyContent: "space-between",
              padding: "12px 16px",
              borderBottom: "1px solid #f0f0f0",
            }}
          >
            <div>
              <span style={{ fontWeight: "bold" }}>{product.name}</span>
              <span
                style={{
                  marginLeft: 8,
                  fontSize: 12,
                  color: "#fff",
                  background: "#1890ff",
                  padding: "2px 6px",
                  borderRadius: 4,
                }}
              >
                {product.category}
              </span>
            </div>
            <span style={{ color: "#ff4d4f", fontWeight: "bold" }}>
              {formatPrice(product.price)}
            </span>
          </div>
        ))
      )}
    </div>
  );
}

export default ProductSearch;

// ❌ 错误：首字母小写 → React 把它当普通 HTML 标签
function myButton() {
  return <button>点击</button>;
}
// 使用：<myButton />  →  不会渲染！

// ✅ 正确：首字母必须大写
function MyButton() {
  return <button>点击</button>;
}

// ❌ 错误：两个并列元素
function App() {
  return (
    <h1>标题</h1>
    <p>段落</p>
  );
}
// 报错：Adjacent JSX elements must be wrapped in an enclosing tag.

// ✅ 正确：用 <div> 或 <>...</> 包裹
function App() {
  return (
    <>
      <h1>标题</h1>
      <p>段落</p>
    </>
  );
}

// ❌ 错误：return 后换行 → JS 自动插入分号 → return;（什么都没返回）
function App() {
  return;
  <div>
    <h1>标题</h1>
  </div>;
}
// 结果：页面一片空白！

// ✅ 正确：return 后紧跟 (
function App() {
  return (
    <div>
      <h1>标题</h1>
    </div>
  );
}

// ❌ 错误：直接改 props
function Greeting({ name }) {
  name = name.toUpperCase(); // 试图修改 props！
  return <h1>你好，{name}</h1>;
}

// ✅ 正确：存到新变量
function Greeting({ name }) {
  const upperName = name.toUpperCase(); // 新变量，不动 props
  return <h1>你好，{upperName}</h1>;
}

// ❌ 错误：Hook 在 if 语句里
function Bad({ isAdmin }) {
  if (isAdmin) {
    const [data, setData] = useState(null); // 报错！
  }
}

// ✅ 正确：Hook 始终在顶层
function Good({ isAdmin }) {
  const [data, setData] = useState(null); // 始终在这里

  useEffect(() => {
    if (isAdmin) fetchData().then(setData); // 条件逻辑放里面
  }, [isAdmin]);

  return <div>...</div>;
}

// ❌ 错误：直接 push（引用没变，React 检测不到）
function BadList() {
  const [items, setItems] = useState(["苹果", "香蕉"]);

  const addItem = () => {
    items.push("橘子"); // 改了原数组！
    setItems(items); // 引用地址没变 → React 认为没变化 → 不渲染！
  };
  // 点击按钮 → 页面没有变化！
}

// ✅ 正确：创建新数组
function GoodList() {
  const [items, setItems] = useState(["苹果", "香蕉"]);

  const addItem = () => {
    setItems([...items, "橘子"]); // 新数组，新引用 → React 检测到变化
  };
  // 点击按钮 → 页面出现"橘子" ✅
}

// ❌ 错误：没有依赖数组 → 每次渲染都执行
function Bad() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }); // ← 没有 []！每次渲染都执行！
  // 如果在里面 setCount，会死循环！

  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

// ✅ 正确：加上依赖数组
function Good() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(count);
  }, [count]); // ← 有依赖数组，只在 count 变化时执行

  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

// ❌ 错误：加了事件监听，没移除 → 内存泄漏
function Bad() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);
    // ⚠️ 没有返回清理函数！旧的监听器一直在！
  }, [width]);

  return <div>{width}px</div>;
}

// ✅ 正确：返回清理函数
function Good() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize); // 清理！
    };
  }, []); // 空数组：只绑定一次

  return <div>{width}px</div>;
}

// ❌ 错误：在函数体中直接发请求 → 每次渲染都发 → 死循环
function Bad({ userId }) {
  fetch(`/api/user/${userId}`) // ⚠️ 渲染阶段执行副作用
    .then((res) => res.json())
    .then((data) => {
      /* setState → 触发渲染 → 又 fetch → 死循环 */
    });

  localStorage.setItem("lastVisit", Date.now()); // ⚠️ 也是副作用

  return <div>{userId}</div>;
}

// ✅ 正确：副作用全放 useEffect
function Good({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch(`/api/user/${userId}`)
      .then((res) => res.json())
      .then(setUserData);
    localStorage.setItem("lastVisit", Date.now());
  }, [userId]);

  return <div>{userId}</div>;
}

// ❌ 错误：effect 里用了 count，但依赖数组是空的（闭包陷阱）
function Bad() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`当前计数：${count}`); // 用了 count
  }, []); // ⚠️ 依赖数组"撒谎"了 —— count 永远是闭包里的旧值 0！

  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

// ✅ 正确：诚实声明所有依赖
function Good() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`当前计数：${count}`);
  }, [count]); // ✅ 诚实声明：我依赖 count

  return <button onClick={() => setCount(count + 1)}>+1</button>;
}

function UserPage({ userId }) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  return <div>{user?.name}</div>;
}