在React中对可迭代对象排序的最优方式是什么？

你直觉真准，这段代码确实藏着好几个容易踩的坑，咱们一个个捋清楚：

• 排序时机完全搞反了：你现在是先把数据源映射成React元素，再对元素数组排序。但React元素是对象啊，用b - a这种数值减法去比较对象，结果只会是NaN——等于排序完全没生效！看起来能运行只是因为浏览器的sort在遇到NaN时会维持原顺序，但这根本不是你想要的按somevalue排序的效果。

• 排序逻辑没对准目标值：你要排序的是数据源里的somevalue，但现在排序的是React元素，完全没用到这个值，等于做了无用功。

• 遗漏了React列表必需的key属性：map渲染列表时没加key，React没法高效识别列表项的变化，会触发不必要的重渲染，还会在控制台抛警告。

• 性能浪费：先map再sort等于多做了一轮不必要的数组转换，完全可以先处理数据源再渲染。

正确的写法应该是这样： #

先对原始数据源排序，再映射成React元素，同时加上唯一key：

// 先拷贝原数组避免直接修改props（props是只读的！），再按somevalue降序排序
const sortedItems = [...this.props.myIterable].sort((a, b) => {
  // 确保somevalue是数值类型，如果是字符串要调整排序逻辑
  return b.somevalue - a.somevalue;
});

// 再渲染排序后的数组
{sortedItems.map((item) => (
  <div key={item.id}>{item.somevalue}</div>
))}

额外提醒： #

1. 永远不要直接修改props！所以用扩展运算符[...arr]拷贝一份再排序，避免污染父组件的数据源。
2. 如果somevalue是字符串类型（比如带数字的字符串），要先转成数值再比较，不然会按字典序排序，结果不符合预期。
3. 尽量用数据源里的唯一标识（比如id）作为key，别用索引，索引会在列表项顺序变化时导致React识别错误。

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