主题
技术英语 10 分钟 - 2026-06-09
今日目标
读懂 React 文档里关于状态更新的一个常见表达:不要把 set state 理解成立刻改变量。
来源类型:React frontend framework
原文
The set function only updates the state variable for the next render.If you read the state variable after calling the set function, you will still get the old value.Use an updater function when the next state depends on the previous state.人话意思
React 里的状态更新不是“这一行执行完,当前变量马上变了”。更稳的理解是:你调用 set function,React 先记下这次更新,等下一次渲染时再给你新的状态值。
所以如果新状态要依赖旧状态,别直接拿当前变量硬算,优先用 updater function。
关键词
- set function: React 里用来更新 state 的函数,比如
setCount - state variable: 状态变量,比如
count - next render: 下一次渲染
- read the state variable: 读取状态变量
- old value: 旧值
- depends on: 依赖于
- previous state: 上一次状态
- updater function: 更新函数,比如
setCount(count => count + 1)
句子拆解
The set function only updates the state variable for the next render.主语是 The set function。
动作是 updates,更新的对象是 the state variable。
关键在最后:for the next render,意思是“给下一次渲染用”,不是“立刻改掉当前变量”。
If you read the state variable after calling the set function, you will still get the old value.这句先看条件:If you read the state variable after calling the set function。
后半句是结果:you will still get the old value。
这里的 still 很有用,表示“仍然、还是”。技术文档里看到它,通常是在提醒你别期待行为马上变化。
Use an updater function when the next state depends on the previous state.这是一个命令句,省略了主语 you。
核心动作是 Use an updater function。
条件是 when the next state depends on the previous state,也就是“当新状态依赖旧状态时”。
今天记住一句
Use an updater function when the next state depends on the previous state.以后看到连续点击、累加计数、列表追加这类场景,先想这句。
30 秒小练习
把这句里的主语、动作和条件找出来:
Use an updater function when the next state depends on the previous state.提示:这句省略了主语 you,动作从 Use 开始。
完成记录
- [ ] 看完原文
- [ ] 看完拆解
- [ ] 完成 30 秒小练习