// 就像你在厨房里准备了一张便签纸和一支专用笔
const [salt, setSalt] = useState(5); // 便签纸初始写的是 5g

// 想改？只能用专用笔写
setSalt(8); // React 检测到变化 → 灶台显示屏自动刷新

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 所有状态挤在一个对象里
    this.state = {
      count: 0,
      name: "",
    };
  }

  increment = () => {
    // 通过 setState 合并更新
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>计数：{this.state.count}</p>
        <button onClick={this.increment}>+1</button>
      </div>
    );
  }
}

function Counter() {
  // 每个状态独立声明，职责清晰
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

const [state, setState] = useState(initialValue);

// 简化版 TypeScript 签名
function useState<S>(
  initialState: S | (() => S),
): [S, Dispatch<SetStateAction<S>>];

// 你也可以显式指定泛型
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

import { useState } from "react";

function MyComponent() {
  const [name, setName] = useState(""); // 声明一个字符串状态
  //     ↑       ↑            ↑
  //   变量名  更新函数名   初始值（空字符串）

  // ... 组件其余逻辑
}

return (
  <div>
    <p>当前名字：{name}</p> {/* 读取状态值，显示在 UI 中 */}
  </div>
);

const handleChange = (e) => {
  setName(e.target.value); // 用户输入 → 更新状态
};

用户输入 "小" → setName("小") → React 标记该组件需要更新
→ React 用新状态重新执行函数组件 → name 变成 "小"
→ JSX 中的 {name} 渲染出 "小" → 用户看到变化

const [count, setCount] = useState(0); // 数字
const [name, setName] = useState("小明"); // 字符串
const [isOn, setIsOn] = useState(false); // 布尔
const [list, setList] = useState([]); // 空数组
const [user, setUser] = useState(null); // null

// ❌ 不好的写法：每次渲染都会执行 expensiveComputation()
const [data, setData] = useState(expensiveComputation());

// ✅ 好的写法：传入函数，React 只在首次渲染时调用它
const [data, setData] = useState(() => expensiveComputation());

// 假设这个计算很耗时（比如从 localStorage 读大量数据并解析）
function readUserSettings() {
  console.log("正在读取用户设置...（耗时的计算）");
  const raw = localStorage.getItem("userSettings");
  return raw ? JSON.parse(raw) : { theme: "light", fontSize: 14 };
}

function App() {
  // ❌ 每次渲染都执行 readUserSettings()，浪费性能
  const [settings, setSettings] = useState(readUserSettings());

  // ✅ 传入函数，React 只在首次渲染时调用一次
  const [settings, setSettings] = useState(() => readUserSettings());
  // 等效于：const [settings, setSettings] = useState(readUserSettings);
  // 区别在于：前者传入函数引用，React 会帮你只在初始化时调用
}

import { useState } from "react";

function Counter() {
  // 1. 声明状态：count 初始值为 0
  const [count, setCount] = useState(0);

  // 2. 定义更新逻辑：每次 +1
  const handleIncrement = () => {
    setCount(count + 1); // 基于当前值计算新值
  };

  // 3. 渲染：在 JSX 中展示 count，按钮绑定点击事件
  return (
    <div>
      <h2>计数器示例</h2>
      <p>
        当前计数：<strong>{count}</strong>
      </p>
      <button onClick={handleIncrement}>点我 +1</button>
    </div>
  );
}

初始渲染：
  React 调用 Counter()
  → useState(0) 返回 [0, setCount]
  → count = 0，渲染出 "当前计数：0"

用户点击按钮：
  → handleIncrement() 执行
  → setCount(0 + 1) → setCount(1)
  → React 标记 Counter 需要重渲染

第二次渲染：
  React 再次调用 Counter()
  → useState(0) —— React 发现这不是首次渲染，忽略参数 0，用已存储的值 1
  → count = 1，渲染出 "当前计数：1"

用户再点按钮：
  → setCount(1 + 1) → setCount(2)
  → 渲染出 "当前计数：2" ... 以此类推

import { useState } from "react";

function NameInput() {
  // 声明状态：用于存储输入框的值
  const [text, setText] = useState("");

  // 输入框变化时，同步更新状态
  const handleChange = (e) => {
    // e.target.value 是输入框的当前文字
    setText(e.target.value);
  };

  // 清空输入框
  const handleClear = () => {
    setText("");
  };

  return (
    <div>
      <h2>文本输入框同步</h2>

      {/* input 的 value 绑定 state，onChange 更新 state */}
      <input
        type="text"
        value={text} // ← 输入框显示的内容 = state
        onChange={handleChange} // ← 用户输入 → 更新 state
        placeholder="请输入你的名字"
      />

      {/* 实时显示输入内容 */}
      <p>
        你输入的是：<strong>{text || "（暂无内容）"}</strong>
      </p>

      {/* 清空按钮 */}
      <button onClick={handleClear}>清空</button>
    </div>
  );
}

普通 HTML input：用户敲键盘 → 浏览器自己管理输入框里的文字
React 受控 input：用户敲键盘 → onChange 事件 → setState → React 重渲染 → input 用 value 重新显示

                  用户输入 "a"
                       ↓
              onChange 触发
                       ↓
          setText("a")  ← React 知道值变了
                       ↓
          组件重渲染
                       ↓
      input value="a"  ← React 控制显示

这就是"受控"——input 的值被 React state 牢牢控制，而非浏览器自己管。

import { useState } from "react";

function Toggle() {
  // 布尔类型的状态：true 表示开，false 表示关
  const [isOn, setIsOn] = useState(false);

  // 切换函数：取反
  const handleToggle = () => {
    setIsOn(!isOn); // 依赖于当前值取反
    // 更安全的写法（见进阶章节）：
    // setIsOn(prev => !prev);
  };

  return (
    <div>
      <h2>开关切换示例</h2>

      {/* 根据 isOn 的值展示不同内容 */}
      <p>
        当前状态：
        <strong style={{ color: isOn ? "green" : "red" }}>
          {isOn ? "开" : "关"}
        </strong>
      </p>

      {/* 按钮文字和样式也随状态变化 */}
      <button
        onClick={handleToggle}
        style={{
          padding: "10px 24px",
          backgroundColor: isOn ? "#4caf50" : "#f44336",
          color: "white",
          border: "none",
          borderRadius: "4px",
          cursor: "pointer",
          fontSize: "16px",
        }}
      >
        {isOn ? "关闭" : "打开"}
      </button>
    </div>
  );
}

❌ 错误思路：直接修改原对象，然后传给 setState
✅ 正确思路：创建一个新对象（拷贝 + 修改），然后传给 setState

import { useState } from "react";

function UserProfile() {
  const [user, setUser] = useState({
    name: "小明",
    age: 20,
    city: "北京",
  });

  // ❌ 错误写法：直接修改原对象
  const handleWrongUpdate = () => {
    user.age = 21; // 直接修改了原对象！
    setUser(user); // 引用没变，React 认为没变化，不会重渲染！
  };

  // ✅ 正确写法一：展开运算符创建新对象
  const handleCorrectUpdate = () => {
    setUser({
      ...user, // 拷贝所有旧属性
      age: 21, // 覆盖需要修改的属性
    });
  };

  // ✅ 正确写法二：使用更新函数（当新值依赖旧值时推荐）
  const handleUpdateWithFunction = () => {
    setUser((prevUser) => ({
      ...prevUser,
      age: prevUser.age + 1,
    }));
  };

  // ✅ 修改单个字段的通用处理函数
  const handleFieldChange = (field, value) => {
    setUser((prev) => ({
      ...prev,
      [field]: value, // 动态属性名
    }));
  };

  return (
    <div>
      <h2>用户信息</h2>
      <p>姓名：{user.name}</p>
      <p>年龄：{user.age}</p>
      <p>城市：{user.city}</p>

      <button onClick={handleCorrectUpdate}>年龄 +1（正确）</button>

      <input
        value={user.city}
        onChange={(e) => handleFieldChange("city", e.target.value)}
        placeholder="修改城市"
      />
    </div>
  );
}

import { useState } from "react";

function StudentList() {
  const [students, setStudents] = useState(["张三", "李四"]);
  const [newName, setNewName] = useState("");

  // ❌ 错误：直接 push 修改原数组
  const addWrong = () => {
    students.push(newName); // 直接修改了原数组！
    setStudents(students); // 引用没变，不会重渲染
  };

  // ✅ 正确：展开运算符创建新数组
  const addCorrect = () => {
    if (newName.trim() === "") return;
    setStudents([...students, newName]); // 全新数组
    setNewName(""); // 清空输入框
  };

  // ✅ 删除：filter 返回新数组
  const removeStudent = (index) => {
    setStudents(students.filter((_, i) => i !== index));
    // 或者用更新函数形式（更推荐）：
    // setStudents(prev => prev.filter((_, i) => i !== index));
  };

  // ✅ 修改：map 返回新数组
  const updateStudent = (index, newValue) => {
    setStudents(students.map((name, i) => (i === index ? newValue : name)));
  };

  return (
    <div>
      <h2>学生名单</h2>

      {/* 添加区域 */}
      <input
        value={newName}
        onChange={(e) => setNewName(e.target.value)}
        placeholder="输入新学生姓名"
      />
      <button onClick={addCorrect}>添加</button>

      {/* 列表展示 */}
      <ul>
        {students.map((name, index) => (
          <li key={index}>
            {name}
            <button onClick={() => removeStudent(index)}>删除</button>
            <button
              onClick={() => {
                const newName = prompt("修改姓名", name);
                if (newName) updateStudent(index, newName);
              }}
            >
              修改
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Form() {
  // 各自独立，互不干扰
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [age, setAge] = useState(18);

  // 更新互不影响
  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(Number(e.target.value))}
      />
    </form>
  );
}

function Form() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    age: 18,
  });

  // 通用更新函数
  const handleChange = (field, value) => {
    setFormData((prev) => ({
      ...prev,
      [field]: value,
    }));
  };

  return (
    <form>
      <input
        value={formData.name}
        onChange={(e) => handleChange("name", e.target.value)}
      />
      <input
        value={formData.email}
        onChange={(e) => handleChange("email", e.target.value)}
      />
      <input
        type="number"
        value={formData.age}
        onChange={(e) => handleChange("age", Number(e.target.value))}
      />
    </form>
  );
}

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

  const handleClick = () => {
    setCount(count + 1); // 希望 +1
    setCount(count + 1); // 希望再 +1
    setCount(count + 1); // 希望再 +1
    // 问题：点击后 count 变成多少？
  };

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={handleClick}>+3</button>
    </div>
  );
}

const handleClick = () => {
  setCount((prev) => prev + 1); // prev = 0 → 1
  setCount((prev) => prev + 1); // prev = 1 → 2
  setCount((prev) => prev + 1); // prev = 2 → 3
  // 结果：count = 3
};

function BatchExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = () => {
    // 两个不同状态的 setState 也会被批量处理
    setCount((c) => c + 1); // 更新 1
    setFlag((f) => !f); // 更新 2
    // React 18/19：这两次更新合并 → 只触发一次渲染
    // React 17 及以前：在 setTimeout/promise 中不会合并
  };

  console.log("渲染了，count =", count, "flag =", flag);

  return (
    <div>
      <p>count: {count}</p>
      <p>flag: {String(flag)}</p>
      <button onClick={handleClick}>同时更新两个状态</button>
    </div>
  );
}

function BadComponent({ isLoggedIn }) {
  // ❌ 条件判断中调用 useState
  if (isLoggedIn) {
    const [user, setUser] = useState(null);
  }

  // ❌ 循环中调用 useState
  for (let i = 0; i < 5; i++) {
    const [value, setValue] = useState(i);
  }

  // ❌ 嵌套函数中调用 useState
  const handleSomething = () => {
    const [temp, setTemp] = useState(""); // 不行！
  };

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

第一次渲染（isLoggedIn = true）：
  Hook #0: useState(null)   → user state
  Hook #1: useState(0)      → count state

第二次渲染（isLoggedIn = false）：
  Hook #0: useState(0)      → 本应该是 count，但 React 以为这是 user！
  // count 读到了 user 的值，数据错乱！

function GoodComponent({ isLoggedIn }) {
  // ✅ 始终在顶层声明所有 Hook
  const [user, setUser] = useState(null);
  const [count, setCount] = useState(0);

  // 条件逻辑放在 Hook 下方
  if (!isLoggedIn) {
    return <div>请先登录</div>;
  }

  return (
    <div>
      欢迎，{user?.name}，计数：{count}
    </div>
  );
}

function BadVsGood() {
  const [items, setItems] = useState(["a", "b"]);
  const [user, setUser] = useState({ name: "小明", age: 18 });

  // ========== 数组操作 ==========

  // ❌ push 直接修改原数组
  const addWrong = () => {
    items.push("c");
    setItems(items); // 引用没变，不触发渲染！
  };

  // ✅ 创建新数组
  const addCorrect = () => {
    setItems([...items, "c"]);
  };

  // ========== 对象操作 ==========

  // ❌ 直接修改属性
  const updateWrong = () => {
    user.age = 19;
    setUser(user);
  };

  // ✅ 创建新对象
  const updateCorrect = () => {
    setUser({ ...user, age: 19 });
  };

  return (/* ... */);
}

state 在 React 内部存储结构（简化）：

  componentFiber.stateHooks = [
    { value: ['a', 'b'] },  ← items 状态
    { value: { name: '小明', age: 18 } }  ← user 状态
  ]

当你调用 setState 时：

  setItems(['a', 'b', 'c'])
  → React 比较：新值 ['a', 'b', 'c'] !== 旧值 ['a', 'b'] ✅ 变了！
  → 触发重渲染

当你直接 push 时：

  items.push('c')  → items 变成 ['a', 'b', 'c']
  setItems(items)  → React 比较：items === items（同一个引用！）❌ 没变！
  → 不触发渲染

React 用的是 Object.is() 比较新旧值，引用类型靠引用地址判断。

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

  const handleClick = () => {
    setCount(count + 1);
    console.log(count); // 期望 1，实际 0！
    // 因为 setCount 是异步调度，count 的值还没变
  };

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={handleClick}>+1 并打印</button>
    </div>
  );
}

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

  const handleClick1 = () => {
    // 方案一：使用更新函数，在函数内拿到最新值
    setCount((prev) => {
      const newValue = prev + 1;
      console.log("最新值（方案一）：", newValue); // ✅ 拿到正确值
      return newValue;
    });
  };

  const handleClick2 = () => {
    // 方案二：用 useEffect 监听 state 变化
    setCount(count + 1);
    // useEffect 会在渲染完成后执行，此时能拿到新值
  };

  // 配合方案二
  // useEffect(() => {
  //   console.log("count 已更新为：", count);
  // }, [count]);

  const handleClick3 = () => {
    // 方案三：用临时变量记录新值
    const newCount = count + 1;
    setCount(newCount);
    console.log("最新值（方案三）：", newCount); // ✅ 直接用临时变量
  };

  return (/* ... */);
}

function InitialValueTrap({ initialName }) {
  // 即使 initialName 变了，name 也不会变！
  const [name, setName] = useState(initialName);

  console.log("父组件传来的 initialName：", initialName);
  console.log("当前 name 状态：", name);

  return <p>{name}</p>;
}

// 父组件
function Parent() {
  const [name, setName] = useState("小明");
  return (
    <div>
      <button onClick={() => setName("小红")}>改名</button>
      <InitialValueTrap initialName={name} />
      {/* 点击改名后，InitialValueTrap 中的 name 仍然是 "小明"！ */}
    </div>
  );
}

function Fixed({ initialName }) {
  const [name, setName] = useState(initialName);

  // 方案一：用 useEffect 同步外部值
  useEffect(() => {
    setName(initialName);
  }, [initialName]);

  // 方案二：如果只是要用 prop 的值，直接用 prop，不需要 state
  // 根本不需要 useState！

  return <p>{name}</p>;
}

function AbuseExample({ firstName, lastName }) {
  // ❌ 滥用：fullName 完全可以从 firstName 和 lastName 计算出来
  const [fullName, setFullName] = useState("");
  useEffect(() => {
    setFullName(`${firstName} ${lastName}`);
  }, [firstName, lastName]);

  // ✅ 正确做法：直接计算派生值，不需要 state
  const fullName = `${firstName} ${lastName}`;

  return <p>{fullName}</p>;
}

function SmartVsOverkill() {
  const [firstName, setFirstName] = useState("张");
  const [lastName, setLastName] = useState("三");

  // ✅ 派生值：直接计算
  const fullName = `${firstName}${lastName}`;

  // ✅ 派生值：带逻辑
  const displayName = firstName && lastName ? fullName : "匿名用户";

  // ✅ 派生值：数组操作
  const [list, setList] = useState([1, 2, 3]);
  const count = list.length;
  const hasItems = list.length > 0;

  return (
    <div>
      <p>姓名：{displayName}</p>
      <p>列表项数：{count}</p>
      <p>{hasItems ? "有数据" : "列表为空"}</p>
    </div>
  );
}

import { useState } from "react";

function TodoApp() {
  // 1. 任务列表状态：数组，每项是一个 { id, text, done } 对象
  const [todos, setTodos] = useState([
    { id: 1, text: "学习 React useState", done: false },
    { id: 2, text: "完成课后练习", done: false },
  ]);

  // 2. 输入框状态
  const [inputValue, setInputValue] = useState("");

  // 3. 当前筛选条件：'all' | 'done' | 'undone'
  const [filter, setFilter] = useState("all");

  // 获取下一个 id（简单做法：最大 id + 1）
  const [nextId, setNextId] = useState(3);

  // ====== 增：添加新任务 ======
  const addTodo = () => {
    const text = inputValue.trim();
    if (text === "") return; // 空内容不添加

    // 创建新任务对象，追加到数组末尾
    setTodos([...todos, { id: nextId, text, done: false }]);
    setNextId(nextId + 1); // id 递增
    setInputValue(""); // 清空输入框
  };

  // ====== 删：根据 id 删除任务 ======
  const deleteTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  // ====== 改：切换完成状态 ======
  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, done: !todo.done } : todo,
      ),
    );
  };

  // ====== 改：编辑任务文本 ======
  const updateText = (id, newText) => {
    setTodos(
      todos.map((todo) => (todo.id === id ? { ...todo, text: newText } : todo)),
    );
  };

  // ====== 查：根据筛选条件过滤展示 ======
  const filteredTodos = todos.filter((todo) => {
    if (filter === "done") return todo.done;
    if (filter === "undone") return !todo.done;
    return true; // 'all'
  });

  // ====== 统计数据（派生值，不需要 useState）======
  const totalCount = todos.length;
  const doneCount = todos.filter((t) => t.done).length;

  // 处理键盘事件：按 Enter 添加
  const handleKeyDown = (e) => {
    if (e.key === "Enter") addTodo();
  };

  return (
    <div style={{ maxWidth: 500, margin: "0 auto" }}>
      <h2>Todo 列表</h2>

      {/* ====== 输入区域 ====== */}
      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        <input
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="输入新任务，按 Enter 添加"
          style={{ flex: 1, padding: 8 }}
        />
        <button onClick={addTodo}>添加</button>
      </div>

      {/* ====== 筛选按钮 ====== */}
      <div style={{ marginBottom: 16 }}>
        {[
          { key: "all", label: "全部" },
          { key: "undone", label: "未完成" },
          { key: "done", label: "已完成" },
        ].map(({ key, label }) => (
          <button
            key={key}
            onClick={() => setFilter(key)}
            style={{
              marginRight: 8,
              fontWeight: filter === key ? "bold" : "normal",
              color: filter === key ? "#1976d2" : "#666",
            }}
          >
            {label}
          </button>
        ))}
      </div>

      {/* ====== 任务列表 ====== */}
      {filteredTodos.length === 0 ? (
        <p style={{ color: "#999" }}>暂无任务</p>
      ) : (
        <ul style={{ listStyle: "none", padding: 0 }}>
          {filteredTodos.map((todo) => (
            <li
              key={todo.id}
              style={{
                display: "flex",
                alignItems: "center",
                padding: "8px 0",
                borderBottom: "1px solid #eee",
              }}
            >
              {/* 复选框：切换完成状态 */}
              <input
                type="checkbox"
                checked={todo.done}
                onChange={() => toggleTodo(todo.id)}
                style={{ marginRight: 8 }}
              />

              {/* 任务文本 */}
              <span
                style={{
                  flex: 1,
                  textDecoration: todo.done ? "line-through" : "none",
                  color: todo.done ? "#999" : "#333",
                }}
              >
                {todo.text}
              </span>

              {/* 编辑按钮 */}
              <button
                onClick={() => {
                  const newText = prompt("修改任务", todo.text);
                  if (newText && newText.trim()) {
                    updateText(todo.id, newText.trim());
                  }
                }}
                style={{ marginRight: 8 }}
              >
                编辑
              </button>

              {/* 删除按钮 */}
              <button onClick={() => deleteTodo(todo.id)}>删除</button>
            </li>
          ))}
        </ul>
      )}

      {/* ====== 统计信息 ====== */}
      <div style={{ marginTop: 16, color: "#666", fontSize: 14 }}>
        共 {totalCount} 项，已完成 {doneCount} 项
      </div>
    </div>
  );
}

import { useState } from "react";

function RegisterForm() {
  // 表单数据用对象管理（字段属于同一实体）
  const [form, setForm] = useState({
    username: "",
    password: "",
    phone: "",
  });

  // 错误信息也用一个对象管理
  const [errors, setErrors] = useState({});

  // 通用字段更新函数
  const handleChange = (field, value) => {
    setForm((prev) => ({ ...prev, [field]: value }));

    // 更新时实时清除该字段的错误提示
    if (errors[field]) {
      setErrors((prev) => {
        const newErrors = { ...prev };
        delete newErrors[field];
        return newErrors;
      });
    }
  };

  // 表单校验
  const validate = () => {
    const newErrors = {};

    if (form.username.trim().length < 3) {
      newErrors.username = "用户名至少 3 个字符";
    }

    if (form.password.length < 6) {
      newErrors.password = "密码至少 6 位";
    }

    if (!/^1[3-9]\d{9}$/.test(form.phone)) {
      newErrors.phone = "请输入有效的手机号";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0; // 无错误则通过
  };

  // 提交
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止默认表单提交行为
    if (validate()) {
      alert("注册成功！\n" + JSON.stringify(form, null, 2));
    }
  };

  // 重置
  const handleReset = () => {
    setForm({ username: "", password: "", phone: "" });
    setErrors({});
  };

  return (
    <div style={{ maxWidth: 400, margin: "0 auto" }}>
      <h2>注册表单</h2>

      <form onSubmit={handleSubmit}>
        {/* 用户名 */}
        <div style={{ marginBottom: 16 }}>
          <label>用户名：</label>
          <input
            value={form.username}
            onChange={(e) => handleChange("username", e.target.value)}
            placeholder="至少 3 个字符"
            style={{
              display: "block",
              width: "100%",
              padding: 8,
              marginTop: 4,
              border: errors.username ? "1px solid red" : "1px solid #ccc",
            }}
          />
          {errors.username && (
            <span style={{ color: "red", fontSize: 12 }}>
              {errors.username}
            </span>
          )}
        </div>

        {/* 密码 */}
        <div style={{ marginBottom: 16 }}>
          <label>密码：</label>
          <input
            type="password"
            value={form.password}
            onChange={(e) => handleChange("password", e.target.value)}
            placeholder="至少 6 位"
            style={{
              display: "block",
              width: "100%",
              padding: 8,
              marginTop: 4,
              border: errors.password ? "1px solid red" : "1px solid #ccc",
            }}
          />
          {errors.password && (
            <span style={{ color: "red", fontSize: 12 }}>
              {errors.password}
            </span>
          )}
        </div>

        {/* 手机号 */}
        <div style={{ marginBottom: 16 }}>
          <label>手机号：</label>
          <input
            value={form.phone}
            onChange={(e) => handleChange("phone", e.target.value)}
            placeholder="11 位手机号"
            style={{
              display: "block",
              width: "100%",
              padding: 8,
              marginTop: 4,
              border: errors.phone ? "1px solid red" : "1px solid #ccc",
            }}
          />
          {errors.phone && (
            <span style={{ color: "red", fontSize: 12 }}>{errors.phone}</span>
          )}
        </div>

        {/* 按钮 */}
        <div style={{ display: "flex", gap: 12 }}>
          <button type="submit">注册</button>
          <button type="button" onClick={handleReset}>
            重置
          </button>
        </div>
      </form>
    </div>
  );
}

import { useState, useEffect } from "react";

function ThemeSwitcher() {
  // 从 localStorage 读取初始主题（懒初始化）
  const [theme, setTheme] = useState(() => {
    return localStorage.getItem("theme") || "light";
  });

  // 当 theme 变化时，自动同步到 localStorage
  useEffect(() => {
    localStorage.setItem("theme", theme);
    console.log(`主题已切换为：${theme}`);
  }, [theme]); // 依赖 theme，theme 变就执行

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <div
      style={{
        backgroundColor: theme === "light" ? "#fff" : "#333",
        color: theme === "light" ? "#333" : "#fff",
        padding: 20,
        borderRadius: 8,
        transition: "all 0.3s",
      }}
    >
      <p>当前主题：{theme}</p>
      <button onClick={toggleTheme}>切换主题</button>
    </div>
  );
}

import { useState, useEffect } from "react";

function SearchBox() {
  const [keyword, setKeyword] = useState("");
  const [debouncedKeyword, setDebouncedKeyword] = useState("");

  // keyword 变化后等待 500ms 再更新 debouncedKeyword
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedKeyword(keyword);
    }, 500);

    // 清理函数：下次 effect 执行前清除上一次的定时器
    return () => clearTimeout(timer);
  }, [keyword]);

  // debouncedKeyword 变化时发起搜索
  useEffect(() => {
    if (debouncedKeyword) {
      console.log("发起搜索：", debouncedKeyword);
      // 实际项目中这里调用 API
    }
  }, [debouncedKeyword]);

  return (
    <div>
      <input
        value={keyword}
        onChange={(e) => setKeyword(e.target.value)}
        placeholder="输入关键词搜索"
      />
      <p>实际搜索词：{debouncedKeyword}</p>
    </div>
  );
}

用户输入 "react"
  → keyword: "" → "r" → "re" → "rea" → "reac" → "react"
  → 每次变化都触发 useEffect（设定 500ms 计时器）
  → 但只有最后一次的计时器不会被清除
  → 500ms 后 debouncedKeyword 变为 "react"
  → 触发搜索 effect → 发起 API 请求

这样避免用户每敲一个字母就发一次请求，只在输入停顿后发一次。

import { useState } from "react";

function DoubleCounter() {
  // TODO: 声明一个 count 状态，初始值为 1

  const handleDouble = () => {
    // TODO: 使 count 翻倍
  };

  return (
    <div>
      <p>当前值：{/* TODO: 显示 count */}</p>
      <button onClick={handleDouble}>翻倍</button>
    </div>
  );
}

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

  const addTwo = () => {
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={addTwo}>+2</button>
    </div>
  );
}

function UserCard() {
  const [user, setUser] = useState({ name: "小明", age: 18 });

  const growUp = () => {
    user.age = user.age + 1;
    setUser(user);
  };

  return (
    <div>
      <p>
        {user.name}，{user.age} 岁
      </p>
      <button onClick={growUp}>长大一岁</button>
    </div>
  );
}