function Doorbell() {
  const [rings, setRings] = useState(0);
 
  function handleRing() {
    //            ↑ 事件处理函数 — 门铃响了，你来开门
    setRings(rings + 1);
    //          ↑ 告诉 React：「重渲染时用这个新值」
  }
 
  return (
    <div>
      <p>门铃被按了 {rings} 次</p>
      <button onClick={handleRing}>
        {/*       ↑ 门铃 — 用户点击时触发 */}
        按门铃
      </button>
    </div>
  );
}

function Demo() {
  // ❌ 普通变量 — 每次渲染都重置为 0
  let count = 0;
 
  // ✅ State — React 记得上次渲染的值
  const [count, setCount] = useState(0);
 
  function handleClick() {
    // count = count + 1;    // ❌ 普通变量：改了也没用，下次渲染又变回 0
    //                        //    而且 React 不知道你改了它
 
    setCount(count + 1);     // ✅ State：React 知道值变了 → 安排重渲染
  }
}

function Demo() {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + 1);
    console.log(count);  // 输出什么？
    // → 0（不是 1！）
    // 因为「这次渲染」的 count 不会变——setCount 影响的是「下次渲染」的 count
  }
 
  return (
    <div>
      <p>count: {count}</p>  {/* 第一次渲染：0。点击后重渲染：1 */}
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

function Trap() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);  // 这是什么？
      // ↑ 永远是 setCount(0 + 1) = setCount(1)
      //    因为这个 effect 属于 count=0 的那次渲染
      //    它永远「看到」count = 0
    }, 1000);
    return () => clearInterval(timer);
  }, []);  // ← 空依赖：effect 只在 mount 时跑一次
 
  // 结果：count 从 0 → 1，然后就停在 1 不动了
  return <p>{count}</p>;
}

useEffect(() => {
  const timer = setInterval(() => {
    setCount(c => c + 1);  // ← 不是读外部 count，而是 React 把当前快照值传给你
    //     React 保证 c 永远是最新值
  }, 1000);
  return () => clearInterval(timer);
}, []);
 
// 结果：count 持续递增 0 → 1 → 2 → 3 ...

function Demo() {
  const [count, setCount] = useState(0);
 
  function handleClick() {
    setCount(count + 1);  // setCount(0 + 1) = setCount(1)
    setCount(count + 1);  // setCount(0 + 1) = setCount(1)  ← 还是同一个 count！
    setCount(count + 1);  // setCount(0 + 1) = setCount(1)  ← 同一个快照
  }
  // 点击后：count = 1（不是 3！）
 
  function handleClickFixed() {
    setCount(c => c + 1);  // c = 0 → 1
    setCount(c => c + 1);  // c = 1 → 2  ← React 把上次更新的结果传给 c
    setCount(c => c + 1);  // c = 2 → 3  ← 链式累加
  }
  // 点击后：count = 3
}

function Demo() {
  const [user, setUser] = useState({ name: 'Coya', age: 28 });
 
  // ❌ 错误：直接修改
  function wrongUpdate() {
    user.name = 'Tom';           // 改了原始对象
    setUser(user);               // 引用没变 — React 可能跳过渲染
  }
 
  // ✅ 正确：创建新对象
  function correctUpdate() {
    setUser({
      ...user,                   // 复制所有旧字段
      name: 'Tom',               // 覆盖要改的字段
    });
  }
 
  // ✅ 函数式更新 + 不可变（最安全）
  function bestUpdate() {
    setUser(prev => ({
      ...prev,
      name: 'Tom',
    }));
  }
}

// ── 对象：更新一个字段 ──
setUser({ ...user, age: 29 });
 
// ── 对象：更新嵌套字段 ──
setUser({
  ...user,
  profile: {
    ...user.profile,
    bio: '新的自我介绍',
  },
});
 
// ── 数组：添加元素 ──
setTodos([...todos, newTodo]);         // 末尾添加
setTodos([newTodo, ...todos]);         // 开头添加
 
// ── 数组：删除元素 ──
setTodos(todos.filter(t => t.id !== id));  // 删指定元素
setTodos(todos.slice(0, -1));             // 删最后一个
 
// ── 数组：更新元素 ──
setTodos(todos.map(t =>
  t.id === id ? { ...t, done: true } : t
));
 
// ── 数组：插入元素 ──
const idx = 2;
setTodos([
  ...todos.slice(0, idx),
  newTodo,
  ...todos.slice(idx),
]);