state 与事件处理
React 用 Hook 管理组件内部状态，最基础的是 useState：const [count, setCount] = useState(0) 返回「当前值」和「修改函数」这对搭档。铁律：必须通过 setCount 修改状态，直接改 count 变量不会触发任何重新渲染。
两个高频细节：一是 set 函数传入函数形式 setCount(c => c + 1) 基于上一次的值更新——在同一个事件里连续调用多次时更安全（直接 setCount(count + 1) 两次只会加 1，因为 count 还是旧值）；二是 state 更新是异步批处理的，set 之后立刻读 count 拿到的还是旧值。
事件处理：JSX 里 onClick={handleClick} 传的是函数引用，不要写成 onClick={handleClick()}（那是立刻执行，不是注册）。需要传参时写成箭头函数 onClick={() => del(item.id)}。组件内多个状态就多次调用 useState，各管各的。
本节要点useState 返回 [值, 修改函数]；必须用 set 函数改状态；基于旧值更新用函数形式；onClick 传函数引用不能带括号。
代码
import { useState } from 'react';
function Counter() {
// useState 返回 [当前值, 修改函数]
const [count, setCount] = useState(0);
const [list, setList] = useState([]);
function handleClick() {
setCount(count + 1); // 直接传新值
// setCount((c) => c + 1); // 基于上一次的值（连续调用更安全）
}
function addItem() {
// 修改数组：生成新数组（不能 push 原数组）
setList([...list, '新项目 ' + (list.length + 1)]);
}
return (
<div>
<button onClick={handleClick}>点击了 {count} 次</button>
<button onClick={addItem}>添加</button>
<ul>
{list.map((item, i) => (
<li key={i}
onClick={() => console.log('点了', item)}>
{item}
</li>
))}
</ul>
</div>
);
}
// 核心思想：UI = f(state) —— 改状态，React 帮你重新渲染
