useState：组件桌面上的便签纸

一句话理解

state 是页面当前要记住的值。useState 像给组件一张便签纸：内容改变后，React 会重新看一遍页面该显示什么。

什么情况下使用

这些值会随着用户操作变化，所以经常放进 state：

• 输入框现在输入了什么
• 菜单是否打开
• 请求是否还在加载
• 当前有没有报错
• 后端返回的留言列表

逐词看懂

const [text, setText] = useState('')

const       创建名字，后面不允许把整组名字重新指向别处
[ ]         数组解构，把 React 返回的两个东西分别取出来
text        当前值，读取它来显示内容
setText     更新函数，调用它来改变当前值
useState    React 提供的记忆功能
''          初始值是空文字

这不是一句魔法。它等价于 React 给你“当前便签内容”和“更换便签的工具”。

具体例子：受控输入框

const [text, setText] = useState('')

<input
  value={text}
  onChange={(event) => setText(event.target.value)}
/>

真实过程：

用户输入“你”
→ 浏览器触发 onChange
→ event.target.value 是“你”
→ setText('你') 更新 state
→ React 重新运行组件
→ value={text} 显示“你”

发布后把新留言放进列表

const [messages, setMessages] = useState([])

function addMessage(newMessage) {
  setMessages([newMessage, ...messages])
}

...messages 表示把旧数组里的每一项展开。新数组先放新留言，再放旧留言。

不要直接写 messages.push(newMessage)。它修改了旧数组，但没有通过更新函数把新的结果交给 React。

更稳妥的写法是：

setMessages((oldMessages) => [newMessage, ...oldMessages])

当连续发生多次更新时，这种写法能拿到最新的旧列表。

页面不更新时看哪里

1. 在点击函数第一行加 console.log('点击了')，确认函数真的执行。
2. 打印准备传给更新函数的值。
3. 确认调用的是 setMessages(...)，不是只修改普通变量。
4. 确认页面显示用的也是 messages，不是另一个同名或旧变量。
5. 如果后端已返回 200，但列表没变化，重点检查 setMessages。

自己试试

在浏览器 Console 观察项目里的一个 state。先点一次按钮，再在按钮函数里临时加两行日志：更新前打印旧值，计算出新值后打印新值。不要打印密钥或登录信息。

请求成功返回新留言，但页面列表没有变化，最该先检查什么？

答案：检查成功分支里是否调用了列表对应的 state 更新函数，以及传进去的数据结构是否正确。