Array.prototype.toSorted() 是 ES2023 引入的不可变排序方法，不修改原数组而返回新数组，天然契合 React 声明式更新；相比会就地修改的 sort()，它避免状态篡改、优化失效和调试困难等问题。
Array.prototype.toSorted() 是 ES2023 引入的不可变排序方法，它不会修改原数组，而是返回一个新排序后的数组 —— 这一特性天然契合 React 的声明式更新原则：状态更新应基于不可变数据，避免副作用。
为什么 toSorted() 比 sort() 更适合 React
React 中直接调用 arr.sort() 会就地修改原数组，若该数组来自 state 或 props，可能引发：
- 状态对象被意外篡改，导致后续渲染不一致或跳过更新
- 与
useMemo、React.memo等优化逻辑冲突（依赖项未变但内容已变） - 难以追踪数据流，增加调试难度
toSorted() 完全规避这些问题：它始终返回新数组，原数组保持纯净，符合 React “只通过 setState 更新状态” 的范式。
在组件中安全使用 toSorted() 排序列表
常见场景是响应用户操作（如点击表头）切换排序字段或顺序。推荐方式：
- 将原始数据存于 state（如
const [items, setItems] = useState(original)） - 在事件处理器或
useMemo中调用items.toSorted(...)，生成派生排序结果 - 仅当需要持久化新顺序时，才用
setItems(sorted)更新 state
示例（按 name 升序）：
const sortedItems = items.toSorted((a, b) => a.name.localeCompare(b.name));
配合 useMemo 缓存排序结果，避免重复计算
若排序逻辑较重（如处理大量数据或复杂比较），应包裹在 useMemo 中，并将排序依据（字段、方向、原始数组）列为依赖项：
items.toSorted((a, b) => {
if (sortField === 'price') return direction === 'asc' ? a.price - b.price : b.price - a.price;
return direction === 'asc' ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
}),
[items, sortField, direction]
);
这样既保证不可变性，又避免每次渲染都执行排序。
兼容性与降级方案
toSorted() 目前在现代浏览器和 Node.js 20+ 中可用，但若需支持旧环境（如 IE 或旧版 Safari），可：
- 使用 polyfill（如 core-js）
- 手动降级：
[...arr].sort(...)—— 展开语法创建副本再排序，语义等价且兼容性极佳
例如：arr.toSorted?.((a, b) => a.id - b.id) ?? [...arr].sort((a, b) => a.id - b.id)
