React中对象状态与拆分简单值状态的性能差异有多大？

结论 #

两种状态管理方式在运行时性能上存在差异，但绝大多数普通业务场景下差异可忽略不计，仅在极端高频率更新、状态对象体积极大的场景下会有可感知的差距。

1. 状态更新的开销差异 #

单对象状态（示例1）

const [state, setState] = useState({ 
  title: 'Jerome Is Coming!', 
  year: '1998'
})

这种写法更新单个属性时，必须先对原对象做浅拷贝再修改对应属性，类似这样：

setState(prev => ({...prev, year: '2024'}))

浅拷贝的时间成本和对象的第一层属性数量正相关，属性越多，拷贝开销越高。且React在状态对比时只判断引用是否变化，不管你改了一个还是全部属性，这个状态的更新开销都是一致的，不存在“只更新单个属性开销更低”的情况。

拆分独立状态（示例2）

const [title, setTitle] = useState('Jerome Is Coming!')
const [year, setYear] = useState('1998')

拆分后的状态都是独立的原始值，更新时不需要做任何拷贝操作，直接传入新值即可，本身的更新成本远低于大对象的浅拷贝开销。

2. 组件重渲染的额外差异 #

如果你的状态会传递给子组件，两者的差异会被放大：

• 单对象状态只要有一个属性变化，整个对象的引用就会改变，所有接收这个对象作为prop的子组件都会触发重渲染，哪怕子组件只用到了其中一个没变更的属性
• 拆分状态的情况下，只有被修改的那个状态对应的prop变化，才会触发接收该prop的子组件重渲染，其他子组件不受影响

3. 性能差异的显著程度 #

普通业务场景下，状态对象的第一层属性基本不会超过50个，浅拷贝的开销在微秒级别，和拆分状态的差距完全感知不到。只有当你的状态对象第一层属性超过1000个、且每秒需要更新几十次的极端场景下，才会出现可感知的性能问题。

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