在 React 中调用 setState 更新数组状态时，若直接对原数组调用 sort() 方法（会修改原数组），React 可能无法触发重新渲染；而使用 [...arr].sort() 创建新数组则能正确更新 UI。根本原因在于 React 依赖引用变化检测状态更新，而非值的深比较。
在 react 中调用 `setstate` 更新数组状态时，若直接对原数组调用 `sort()` 方法（会修改原数组），react 可能无法触发重新渲染；而使用 `[...arr].sort()` 创建新数组则能正确更新 ui。根本原因在于 react 依赖引用变化检测状态更新，而非值的深比较。
React 的状态更新机制基于浅层引用比较（shallow reference equality）。当调用 setState 时，React 会对比新旧 state 的引用是否相同（即 oldState === newState）。若引用一致，即使数组内部元素已改变，React 也会跳过 re-render，认为状态未变。
Array.prototype.sort() 是一个原地（in-place）排序方法：它直接修改原数组并返回该数组本身（即返回相同引用）。例如：
const arr = [3, 1, 6]; const sorted = arr.sort((a, b) => a - b); console.log(sorted === arr); // true —— 引用未变！ setArr(sorted); // 实际传入的是原数组引用，React 检测到无引用变化，不触发更新
而 [...arr].sort(...) 先通过扩展运算符创建一个全新数组副本，再对其排序：
const arr = [3, 1, 6]; const sorted = [...arr].sort((a, b) => a - b); console.log(sorted === arr); // false —— 新引用！ setArr(sorted); // 传入新数组，引用不同，React 正确触发 re-render
✅ 正确做法（推荐）：
- 始终保证状态更新时提供新引用；
- 对数组排序、过滤、映射等操作，优先使用不可变方式（如扩展运算符、
slice()、map()等）； - 若需复用逻辑，可封装为纯函数：
const sortNumbers = (nums) => [...nums].sort((a, b) => a - b);
// 在事件或副作用中安全使用
const handleClick = () => {
setNumbers(sortNumbers(numbers));
};
⚠️ 注意事项：
- 即使
sort()后显式赋值给新变量（如const y = arr.sort(...)），也无法改变其原地修改的本质； -
useEffect或事件处理器中若多次调用arr.sort()，可能引发意外交互（如连续点击导致重复排序）； - 对于复杂对象数组排序，同样需先深拷贝（如
arr.map(x => ({...x}))）再排序，避免隐式引用污染。
总结：React 不“感知”数组内部变化，只认引用变更。[...arr].sort() 是符合 React 不可变更新范式的标准实践——既保障状态可预测性，也确保 UI 响应及时准确。
