直接复制数组与展开语法复制数组的区别及React useState重渲染问题

一、旧代码不触发UI重渲染的原因 #

React的useState更新机制依赖**浅比较（引用比较）**来判断状态是否变化：

• 旧代码中const imgList = imagesList;只是将原数组的引用赋值给新变量，imgList和imagesList指向内存中同一个数组实例。
• 调用splice修改的是这个共享数组，之后setImagesList(imgList)传入的仍是原来的数组引用。
• React对比前后状态的引用时，发现无变化，便判定状态未更新，因此不会触发UI重渲染。

二、两种数组复制方式的本质区别 #

1. 直接赋值（const imgList = imagesList;） #

• 属于引用传递，没有创建新数组，只是给原数组增加了一个"别名"。
• 两个变量指向内存中的同一个数组对象，修改其中一个变量对应的数组，另一个变量的数组会同步变化。
• 本质是同一数组的不同引用，内存地址完全相同。

2. 扩展运算符拷贝（const imgList = [...imagesList];） #

• 属于浅拷贝创建新数组，会在内存中开辟新存储空间，生成一个与原数组元素内容相同的新数组实例。
• 新数组与原数组是相互独立的对象，修改新数组不会影响原数组（若数组元素为引用类型，浅拷贝仅复制元素引用，需额外注意）。
• 新数组的内存地址与原数组完全不同。

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