React useState setter无需引用状态变量即可更新的原理与优势

整体代码运行逻辑 #

这是一个生成随机数列表的React组件，初始化时useState将numbers状态设为空数组，点击「Add a Number」按钮会触发addNumber函数，调用setNumbers时传入的更新函数会在原有数组末尾追加新的随机数，最终渲染所有随机数的列表。

你提到的setNumbers无需引用原状态就能完成更新，核心原因是React的setter支持函数式更新特性：当你给setter传一个函数时，React会主动把该状态的最新值作为参数注入这个函数，不需要开发者手动从当前作用域获取旧状态。

问题1：whatever参数的存储属性 #

• whatever不是函数闭包中的变量，它是React执行你传入的更新函数时，主动传入的临时入参
• 它的值取自React内部Fiber节点中存储的numbers状态最新值，仅在本次更新函数执行周期内有效，函数执行完成后就会被回收，不属于组件闭包捕获的常驻变量
• 本质是React帮你读取了内部维护的最新状态，所以不需要你主动引用外部的原numbers变量

问题2：函数式更新 vs 直接引用状态更新的优势 #

对比你给出的直接修改写法：

numbers.push(Math.random());
setNumbers([...numbers]);

函数式更新有两个不可替代的核心优势：

1. 天然遵循React状态不可变原则 #

直接写法中先调用numbers.push()属于直接修改原状态对象，违反了React状态不可变的设计原则，极易引发不可预期的渲染bug；而函数式更新是基于传入的最新状态返回全新的数组，不会修改原状态，完全符合React的更新规范。

2. 永远能拿到最新状态，不会丢失更新 #

当前作用域里的numbers变量是本次渲染快照捕获的固定值，如果你遇到以下场景：

• 短时间内多次调用更新函数
• 在异步回调（比如setTimeout、接口请求回调）中执行更新
  直接引用numbers的写法拿到的永远是触发更新那一刻的旧状态，会覆盖掉中间已经发生的状态修改，出现更新丢失的问题。

举个实际可复现的例子：如果你在同一个点击事件里连续调用两次更新：

// 直接引用写法：点击一次按钮只会新增1个随机数，第二次更新直接覆盖了第一次
const addNumber = () => {
  setNumbers([...numbers, Math.random()]);
  setNumbers([...numbers, Math.random()]);
}

// 函数式更新写法：点击一次按钮会正常新增2个随机数
const addNumber = () => {
  setNumbers(prev => [...prev, Math.random()]);
  setNumbers(prev => [...prev, Math.random()]);
}

异步场景下这个问题会更明显：如果你在点击3秒后再执行更新，这3秒内用户如果已经点击多次修改了numbers，直接引用的写法拿到的还是3秒前的旧值，会把中间的所有修改全部覆盖，函数式更新就不会有这个问题。

内容的提问来源于stack exchange，提问作者Edward Tanguay