你在现代代码库中最常看到的 JavaScript 代码片段之一如下所示：
const nextState = {
...state,
count: state.count + 1
}
React 开发者会这样写。
Redux 开发者会这样写。
Vue 开发者会这样写。
Angular 开发者会这样写。
几乎每个前端框架都鼓励使用它的某种变体。
它看起来很简洁。
它看起来具有不可变性。
它看起来很现代。
它看起来几乎没有任何代价。
但令人不安的真相是：
对象展开操作的成本往往远高于大多数开发者的认知。
这并不意味着对象展开是不好的。
这并不意味着不可变性是不好的。
这并不意味着你应该停止使用它。
但这确实意味着你应该理解它实际上在做什么。
因为一旦你理解了其成本，你就会开始做出更优秀的工程决策。
错觉
当开发者看到：
const nextState = {
...state,
count: state.count + 1
}
他们通常在脑海中将其建模为：
获取状态
更改计数
完成
但实际情况并非如此。
JavaScript 不会魔法般地更新对象。
相反，它执行的操作在概念上更接近于：
const nextState = {}
for (const key in state) {
nextState[key] = state[key]
}
nextState.count =
state.count + 1
注意其中的区别。
我们不是在更新。
我们是在复制。
每一个属性。
每一次操作。
实际发生的情况
考虑以下代码：
const user = {
id: 1,
name: <
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
