在 React 中调用 setState 更新数组状态时，若直接对原数组调用 sort()（会修改原数组），即使内容已变，React 也可能因引用未变而跳过重渲染；而使用 [...arr].sort() 创建新数组，能确保引用变化，触发正确更新。
在 react 中调用 `setstate` 更新数组状态时，若直接对原数组调用 `sort()`（会修改原数组），即使内容已变，react 也可能因引用未变而跳过重渲染；而使用 `[...arr].sort()` 创建新数组，能确保引用变化，触发正确更新。
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); // 新数组 → 新引用 → 触发重渲染
};
⚠️ 注意事项：
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
-
Array.prototype.sort()是原地方法（mutating），会直接修改原数组并返回该数组引用； - 使用扩展运算符
[...arr]、Array.from(arr)或arr.slice()均可生成浅拷贝，是安全实践； - 若数组含对象，仅浅拷贝不够，需深拷贝（如
JSON.parse(JSON.stringify(arr))或结构化克隆），但通常推荐保持状态扁平或使用不可变更新工具（如 Immer）； - 在
useEffect或事件处理器中，务必避免在未拷贝前提下直接调用sort()、push()、pop()等变更原数组的方法。
总结：React 的更新机制基于引用一致性判断。要让状态更新可靠生效，必须保证 setState 接收的是一个新引用的对象——对数组而言，即新创建的数组实例。养成「永远用不可变方式更新状态」的习惯，是构建健壮 React 应用的关键原则之一。
