React state 更新时机

设置 state 只会为下一次渲染变更 state 的值
一个 state 变量的值永远不会在一次渲染的内部发生变化
React 会使 state 的值始终"固定"在一次渲染的各个事件处理函数内部
React 会等到事件处理函数中的所有代码都运行完毕再处理 state 更新

  1. 在一个函数中,多次设置state, 最终结果由最后一次决定
js 复制代码
export default function Counter() {
 const [number, setNumber] = useState(0);
 return (
   <>
     <h1>{number}</h1>
     <button onClick={() => {
     // 第一次执行时,number为0
       setNumber(number + 1); // 相当于setNumber(0 + 1),React 准备在下一次渲染时将 number 更改为 1,React 将 "替换为 1" 添加到其队列中。
       setNumber(number + 1); // 相当于setNumber(0 + 1),React 准备在下一次渲染时将 number 更改为 1,React 将 "替换为 1" 添加到其队列中。
       setNumber(number + 1); // 相当于setNumber(0 + 1),React 准备在下一次渲染时将 number 更改为 1,React 将 "替换为 1" 添加到其队列中。
       // 执行结果 number = 1
     }}>+3</button>
   </>
 )
}
  1. 即使事件处理函数的代码是异步的,它获取到的state也是与本次最初执行时的值保持一致的,state在一次执行时不会改变。
js 复制代码
export default function Counter() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 5);
        setTimeout(() => {
          alert(number); // 0 在onClick执行时,number的值就被固定了。state 在"获取 UI 的快照"时就被"固定"了
        }, 3000);
      }}>+5</button>
    </>
  )
}

如何在重新渲染前,多次更新同一个state

setNumber(n => n + 1)

通过传入一个更新函数 n=>n+1来更新state的值

js 复制代码
export default function Counter() {
  const [number, setNumber] = useState(0);
  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1); // n => n + 1 是一个函数。React 将它加入队列。
        setNumber(n => n + 1); // n => n + 1 是一个函数。React 将它加入队列。
        setNumber(n => n + 1); // n => n + 1 是一个函数。React 将它加入队列。
      }}>+3</button>
    </>
  )
}

当在下次渲染期间调用 useState 时,React 会遍历队列。 之前的 state 的值是 0,所以这就是 React 作为参数 n 传递给第一个更新函数的值。然后 React 会获取上一个更新函数的返回值,并将其作为 n 传递给下一个更新函数,以此类推:

更新队列 n 返回值
n => n + 1 0 0 + 1 = 1
n => n + 1 1 1 + 1 = 2
n => n + 1 2 2 + 1 = 3

React 会保存 3 为最终结果并从 useState 中返回。

相关推荐
重生之我是菜鸡程序员18 分钟前
uniapp 顶部通知 上滑隐藏
前端·javascript·uni-app
fox_1 小时前
JS: 实现扁平化函数 flat
javascript
剽悍一小兔1 小时前
小程序到底用Store还是LocalStorage ?
javascript
一只小风华~1 小时前
学习笔记:Vue Router 中的链接匹配机制与样式控制
前端·javascript·vue.js·笔记·学习·ecmascript
Jerry_Rod2 小时前
react+umijs 项目快速学习
前端·react.js
uhakadotcom2 小时前
在chrome浏览器插件之中,options.html和options.js常用来做什么事情
前端·javascript·面试
西瓜树枝2 小时前
Chrome 扩展开发从入门到实践:以 Cookie 跨页提取工具为例,拆解核心模块与交互逻辑
前端·javascript·chrome
冰糖雪梨dd2 小时前
JS中new的过程发生了什么
开发语言·javascript·原型模式
AliPaPa2 小时前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
小帆聊前端3 小时前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript