useState 状态基础
useState 让函数组件拥有内部数据：返回 [当前值, 修改函数]。调用修改函数会让组件重新渲染，新值反映到界面。这是“数据驱动视图”在 React 中的直接体现。
两条铁律：1）只在组件顶层调用 Hooks，不能放在 if/for 里（Hooks 依赖调用顺序）；2）state 是“快照”——本次渲染中的 count 永远是渲染时的值，连续调用 setCount(count + 1) 只生效一次。
- useState(初始值) 返回 [值, setter]，setter 触发重新渲染
- 只能在组件顶层调用，顺序被 React 用来对应 Hooks
- state 是快照：同步连续 set 同一变量只生效一次
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>useState</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState } = React; function Demo() { const [count, setCount] = useState(0); const [text, setText] = useState('hello'); return ( <div style={{ padding: 16 }}> <p>count = {count}</p> <button onClick={() => setCount(count + 1)}>正确 +1</button> {' '} {/* 反面教材：两次同步 set 用的是旧 count，最终只 +1 */} <button onClick={() => { setCount(count + 1); setCount(count + 1); }}> 连点两次（只+1） </button> <hr /> <p>text = {text}</p> <input value={text} onChange={e => setText(e.target.value)} /> <button onClick={() => setText('')}>清空</button> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<Demo />); </script> </body> </html>
本节要点useState 是函数组件的数据来源：setter 一调，组件重渲染；state 是快照，别按同步思维连写。
