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 可能无法检测到更改。
