React中扩展运算符与直接赋值更新state的差异疑问

核心逻辑：React状态的浅比较机制 + JS引用类型特性 #

1. 普通变量赋值和扩展运算符赋值的本质区别 #

JS中数组、对象属于引用类型，变量存储的不是实际数据内容，而是数据在内存中的引用地址：

• 直接写let tasks = taskItems：仅把taskItems对应的内存引用地址赋值给tasks，两个变量指向完全相同的数组对象，修改数组内元素时，数组本身的引用地址不会发生任何变化。
• 写let tasks = [...taskItems]：扩展运算符会遍历原数组的所有元素，创建一个全新的数组对象，新数组的引用地址和原数组完全不同，属于浅拷贝（数组内元素的引用和原数组保持一致）。

2. 直接赋值不触发重渲染的原因 #

React的useState状态更新默认对新旧状态做浅比较：如果传入setter函数的新值和旧值的引用完全相等，React会判定「状态没有发生变化」，直接跳过本次组件重渲染流程。
你直接赋值的场景下，修改完数组元素后传给settaskItems的依然是原来的数组引用，因此React不会触发重渲染，修改的内容需要等到下次其他状态变更、触发组件重渲染时才会被同步到页面上。

代码优化建议 #

你当前的写法虽然通过扩展运算符创建了新数组，但修改task对象的name属性时，还是直接修改了原对象的属性，不符合React推荐的不可变数据原则，可能引发其他不可预期的问题，建议调整为：

const findAndModify = () => {
  return taskItems.map(t => {
    if (t.name === task.name) {
      // 创建新的task对象，避免修改原对象
      return {...t, name: newname}
    }
    return t
  })
}

调整后既保证数组是新引用，修改的task元素也是新对象，完全符合不可变数据的要求。

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