React 中 setState 时为何必须使用数组拷贝而非原地排序？

在 React 中调用 setState 更新数组状态时，若直接对原数组调用 sort()（会修改原数组），即使内容已变，React 也可能因引用未变而跳过重渲染；而使用 [...arr].sort() 创建新数组，能确保引用变化，触发正确更新。

在 React 里用 setState 更新数组状态时，有个很容易踩的点：如果直接对原数组执行 sort()，由于它会原地修改数据，哪怕内容顺序已经变了，React 也可能因为引用没变而直接跳过这次重渲染。换成 [...arr].sort() 就不一样了，先拷贝出一个新数组再排序，引用随之改变，组件也就能按预期正确更新。

React 判断状态有没有变化，靠的是引用比较（shallow comparison），不是把数据里里外外都重新比一遍。用 useState 管理数组时，React 不会去深度检查数组元素的具体内容，只会看新旧状态是不是同一个引用。只要引用没变，它就会认定状态还是原来的状态，进而直接跳过组件重渲染——哪怕数组内部的顺序其实已经被 sort() 改掉了。

例如：

const [numbers, setNumbers] = useState([3, 1, 6]);

// ❌ 错误：原地排序，返回同一引用
const handleSortInPlace = () => {
numbers.sort((a, b) => a - b); // 修改原数组，但 numbers 引用不变
setNumbers(numbers); // React 检测到引用未变，不触发重渲染
};

// ✅ 正确：创建新数组，确保引用变更
const handleSortSafe = () => {
const sorted = [...numbers].sort((a, b) => a - b);
setNumbers(sorted); // 新数组 → 新引用 → 触发重渲染
};

⚠️ 注意事项：

• Array.prototype.sort() 是原地方法（mutating），会直接修改原数组并返回该数组引用；
• 使用扩展运算符 [...arr]、Array.from(arr) 或 arr.slice() 均可生成浅拷贝，是安全实践；
• 若数组含对象，仅浅拷贝不够，需深拷贝（如 JSON.parse(JSON.stringify(arr)) 或结构化克隆），但通常推荐保持状态扁平或使用不可变更新工具（如 Immer）；
• 在 useEffect 或事件处理器中，务必避免在未拷贝前提下直接调用 sort()、push()、pop() 等变更原数组的方法。

总结：React 的更新机制基于引用一致性判断。要让状态更新可靠生效，必须保证 setState 接收的是一个新引用的对象——对数组而言，即新创建的数组实例。养成「永远用不可变方式更新状态」的习惯，是构建健壮 React 应用的关键原则之一。