useState 给函数组件提供一部分本地的、响应式的状态。它返回一对：当前值和一个setter 函数。调用 setter 会安排一次带有新值的重新渲染。
jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1); // value form
setCount(c => c + 1); // functional form (preferred when based on previous)
让初学者感到惊讶的两件事
1. 更新是异步的 / 批处理的。 count 在 setCount 后的那一行不会改变；它在下一次渲染时有新值。所以这只增加一次：
jsx
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
当下一个值依赖于前一个值时，使用函数式更新程序，因为 React 会传入最新的值：
jsx
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. 初始值仅在第一次渲染时使用。 对于昂贵的默认值，传递一个函数，使其运行一次（惰性初始化）：
jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
为什么这很重要
状态是使组件具有交互性的原因 — 当状态改变时，React 会重新运行函数并重新渲染 UI。
将状态视为不可变的：创建新的数组/对象而不是进行变动，例如 setItems([...items, x])，否则 React 可能无法检测到更改。