如何借助 Array.prototype.toSorted() 实现 React 状态更新中的排序安全性

作者：袖梨 2026-06-05

Array.prototype.toSorted() 是 ES2024 新增的不可变排序方法，返回新数组，天然契合 React 不可变更新原则；相比就地排序的 sort()，它避免引用不变导致的渲染跳过和副作用问题。

Array.prototype.toSorted() 是 ES2024 新增的数组方法，它返回一个**新排序数组**，不修改原数组。在 React 中，这天然契合“不可变更新”原则——避免直接修改 state 数组导致的渲染异常、引用丢失或 useEffect 误触发等问题。

为什么 toSorted() 比 sort() 更安全？

React 状态更新要求数据不可变。传统 arr.sort() 是就地排序（mutating），会改变原数组引用：

若你对 state 数组调用 sort() 后再 setState(arr)，实际传入的是已被修改的同一数组，React 可能跳过重渲染（浅比较发现引用未变）
若该数组被多个组件或 useEffect 依赖，就地修改还会引发竞态、旧状态残留等隐性 bug
toSorted() 总是返回新数组，引用必然变化，确保 React 正确触发更新和依赖重新收集

在 useState 中正确使用 toSorted()

直接在 set 状态时调用 toSorted()，无需中间变量或展开操作：

const [items, setItems] = useState([{ id: 2, name: 'Beta' }, { id: 1, name: 'Alpha' }]);<p>// ✅ 安全：生成新数组，引用变化setItems(prev => prev.toSorted((a, b) => a.id - b.id));</p><p>// ❌ 危险：修改原数组，且 set 的仍是原引用setItems(prev => {prev.sort((a, b) => a.id - b.id);return prev; // 错误！prev 已被污染});

配合其他不可变操作链式使用

toSorted() 可自然融入 filter/map 等纯函数链，保持整个更新过程无副作用：

先过滤再排序：setItems(prev => prev.filter(x => x.active).toSorted((a, b) => b.score - a.score))
排序后映射（如添加序号）：setItems(prev => prev.toSorted((a, b) => a.name.localeCompare(b.name)).map((item, i) => ({ ...item, rank: i + 1 })))
注意：所有中间步骤都应返回新数组，避免任何 .push()、.splice() 或赋值修改