## 使用 toSorted() 代替 sort() 以保持不可变性
`.sort()` 会在原数组上进行修改，这可能会导致 React 状态和属性出现 Bug。请使用 `.toSorted()` 创建一个新的已排序数组，而不修改原数组。
**错误做法 (修改了原始数组):**
typescript
function UserList({ users }: { users: User[] }) {
// 修改了 users 属性数组！
const sorted = useMemo(
() => users.sort((a, b) => a.name.localeCompare(b.name)),
[users]
)
return
{sorted.map(renderUser)}
}
**正确做法 (创建新数组):**
typescript
function UserList({ users }: { users: User[] }) {
// 创建了新的已排序数组，原始数组未改变
const sorted = useMemo(
() => users.toSorted((a, b) => a.name.localeCompare(b.name)),
[users]
)
return
{sorted.map(renderUser)}
}
**为什么这在 React 中很重要:**
1. 修改 Props/state 会破坏 React 的不可变性模型 - React 要求 Props 和 state 被视为只读。
2. 会导致陈旧闭包 (stale closure) Bug - 在闭包（回调、副作用）中修改数组可能导致意外行为。
**浏览器支持 (针对旧浏览器的回退方案):**
`.toSorted()` 在所有现代浏览器中均可用 (Chrome 110+, Safari 16+, Firefox 115+, Node.js 20+)。对于旧环境，请使用展开运算符：
typescript
// 针对旧浏览器的回退方案
const sorted = [...items].sort((a, b) => a.value - b.value)
**其他不可变数组方法:**
- `.toSorted()` - 不可变排序
- `.toReversed()` - 不可变反转
- `.toSpliced()` - 不可变拼接
- `.with()` - 不可变元素替换
粤公网安备44030002003366号