为什么修改useState的数组状态需要先拷贝副本才能触发UI更新？

核心原因：React状态更新依赖引用变化触发重渲染 #

React的useState对于引用类型（数组、对象等）的状态更新采用浅比较逻辑：只会对比新旧状态的内存地址是否相同，不会深入对比内部的属性/元素值是否发生变化。只有检测到新旧状态的引用不同时，才会触发关联组件的重渲染，进而更新UI。

直接修改原数组不生效的原因 #

你直接修改selected[index] = !selected[index]的操作，属于原地修改原数组：修改后selected对应的还是原来的内存地址，和旧状态的引用完全一致。此时调用setSelected(selected)，React会认为状态没有发生变化，直接跳过重渲染流程，因此UI不会更新。
你在控制台看到数组值已经变化，是因为你确实修改了原数组的内部元素，但React没有触发重渲染，所以UI层无法同步最新的状态值。

拷贝数组后生效的原因 #

你用[...selected]创建的updateArray是一个全新的数组，拥有独立的内存地址，和原selected状态的引用完全不同。此时将updateArray传给setSelected，React会检测到状态引用发生变化，触发父组件重渲染，将最新的状态值传递给所有子组件，UI就会同步更新。

关于你提到的“设置key后组件没有重渲染”的误区 #

列表的key属性仅用于React的虚拟DOM diff算法，用来复用同类型节点、减少不必要的DOM创建销毁操作，并不会阻止组件重渲染。当父组件的selected状态更新后，会重新渲染整个列表，所有DateItem子组件都会接收到新的selected props，进而触发自身的重渲染。

优化提示：你贴的第二段子组件代码可以做优化，把数组拷贝逻辑放到onPress回调内部，避免每次组件渲染都重复创建数组：

onPress={() => {
  const updateArray = [...selected]
  updateArray[index] = !updateArray[index]
  setSelected(updateArray)
}}

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