ReactJS中十六进制值数组在求值时为何发生重排？

这是个很多开发者都踩过的控制台“小陷阱”，核心原因在于浏览器控制台的延迟求值机制，结合React应用的运行逻辑，具体拆解如下：

1. 控制台的快照 vs 实时读取 #

当你执行console.log(chartColours)时：

• 未展开的数组显示的是调用log瞬间的数组快照，也就是你声明时的原始顺序；
• 但当你点击展开箭头时，控制台会实时去内存中读取这个数组的当前状态——如果在console.log之后，你的代码（或者依赖的第三方库、React的渲染流程）修改了这个数组的顺序，那展开后看到的就是修改后的结果。

2. React场景下的数组修改可能性 #

在React应用中，这种顺序变动可能来自这些场景：

• 代码后续逻辑的修改：比如某个useEffect、事件回调里不小心修改了这个数组（比如调用了sort这类原地修改数组的方法）；
• 第三方图表库的自动处理：有些图表组件会根据数据分布、视觉需求对颜色数组做排序、重排，无意间改变了原数组的顺序；
• 隐式的数组操作：比如某些工具函数或框架内部逻辑，在你不知情的情况下修改了这个全局/模块级的数组。

快速验证方法 #

如果你想确认数组是不是真的被后续修改了，可以用JSON.stringify来打印即时快照：

console.log(JSON.stringify(chartColours));

JSON.stringify会在调用瞬间把数组序列化为字符串，不会受后续内存中数组的变化影响，这样就能直接对比初始顺序和最终修改后的顺序了。

你提到用添加key的方式解决了渲染顺序问题，这是因为key让React能正确识别每个元素的唯一性，避免因数组顺序变化导致的渲染异常，但本质上还是要找到数组被修改的源头，才能从根本上控制你想要的顺序。

内容的提问来源于stack exchange，提问作者taids