react如何对list首字母排序

对 React 列表按首字母排序的实现方法

在 React 中对列表按首字母排序可以通过多种方式实现，以下为常见方法：

使用 JavaScript 的 sort() 方法

通过数组的 sort() 方法结合 localeCompare() 实现字母排序：

const sortedList = originalList.sort((a, b) => 
  a.name.localeCompare(b.name, 'zh', { sensitivity: 'accent' })
);

处理中文拼音排序

如需中文按拼音排序，可使用 Intl.Collator：

const collator = new Intl.Collator('zh-Hans-CN');
const sortedList = originalList.sort((a, b) => collator.compare(a.name, b.name));

React 组件中的实现示例

function SortedList({ items }) {
  const sortedItems = [...items].sort((a, b) => 
    a.name.localeCompare(b.name)
  );

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

处理大小写敏感情况

如需忽略大小写：

const sortedList = originalList.sort((a, b) =>
  a.name.toLowerCase().localeCompare(b.name.toLowerCase())
);

性能优化建议

对于大型列表，考虑在渲染时使用虚拟滚动技术（如react-window）避免性能问题。