React中解构赋值与array.map实现点赞切换的优劣及代码疑问

Hey there! Nice work getting two working implementations of the like toggle—great start as a React newbie! Let’s break down your questions one by one:

问题1：两种方法各自的优势 #

方法1的优势 #

• 代码简洁直观：使用map遍历数组，逻辑一气呵成，不需要手动查找元素索引，代码量少，可读性强，尤其适合通过唯一标识（比如_id）定位元素的场景
• 不依赖元素位置：哪怕数组元素的顺序发生变化，只要_id匹配就能正确修改目标元素，适用性更广，不用关心元素在数组中的位置

方法2的优势 #

• 严格遵循状态不可变原则：每一步都做了浅拷贝（先拷贝数组，再拷贝目标对象），完全没有修改原状态中的任何对象引用，这是React的最佳实践，能避免意外的状态突变问题，也让React的diff算法更高效
• 逻辑分步清晰：每一步操作都明确（拷贝数组→找索引→拷贝对象→修改属性），对于新手理解React状态管理的核心规则非常有帮助
• 高效定位元素：当你已经拿到目标元素的引用（比如通过事件参数直接获取的movie），用indexOf查找位置的效率很高，尤其适合已知元素引用的场景

问题2：movies[index] = { ...movies[index] };的作用 #

这行代码是对要修改的电影对象进行浅拷贝，核心目的是遵守React的「状态不可变」原则：

• 虽然你已经通过[...this.state.movies]浅拷贝了原数组，但数组里的元素还是原状态中对象的引用——如果直接修改movies[index].liked，本质上还是在修改原状态里的对象（因为引用没变化），这会违反React不能直接修改状态的规则，可能导致React无法正确检测到状态变化，或者引发难以追踪的bug
• 通过{ ...movies[index] }创建一个新的对象，把原对象的所有属性都复制过来，再修改这个新对象的liked属性，就完全不会影响原状态中的对象，保证了状态的不可变性，让React能准确识别到状态更新并触发组件重渲染

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