在 React 中调用 setState 更新数组状态时，不要直接对原数组执行 sort()。

原因是 sort() 会原地修改数组。即使数组内容已经变化，React 也可能因为引用未变而跳过重渲染。

使用 [...arr].sort() 先创建新数组，再进行排序，才能确保引用变化，触发正确更新。

为什么会出现这个问题

在 React 里用 setState 更新数组状态时，这是一个很常见的坑。

如果直接对原数组调用 sort()，它会直接修改原数据。虽然数组顺序变了，但数组引用没有变，React 可能会跳过这次重渲染。

而 [...arr].sort() 的做法不同。它会先拷贝出一个新数组，再对新数组排序，因此引用也会发生变化，组件就能按预期更新。

React 如何判断状态是否变化

React 判断状态有没有变化，靠的是引用比较（shallow comparison），不是深度比较。

使用 useState 管理数组时，React 不会逐项检查数组元素内容。它只会判断新旧状态是否为同一个引用。

只要引用没变，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 应用的关键原则之一。

《夸克》非常好用的免费AI浏览器

下载APP查看