react实现列表排序
实现列表排序的方法
在React中实现列表排序可以通过多种方式完成，以下是几种常见的方法：
使用Array.sort()方法
对数组进行排序后，使用setState或useState更新状态。例如，对一个数字数组进行升序排序：
const [items, setItems] = useState([5, 2, 8, 1, 3]);
const sortAscending = () => {
const sortedItems = [...items].sort((a, b) => a - b);
setItems(sortedItems);
};降序排序只需调整比较函数：
const sortDescending = () => {
const sortedItems = [...items].sort((a, b) => b - a);
setItems(sortedItems);
};对对象数组排序
如果列表项是对象，可以基于对象的某个属性排序。例如，按name属性排序：
const [users, setUsers] = useState([
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
{ id: 3, name: 'Charlie', age: 20 }
]);
const sortByName = () => {
const sortedUsers = [...users].sort((a, b) => a.name.localeCompare(b.name));
setUsers(sortedUsers);
};按age属性排序：
const sortByAge = () => {
const sortedUsers = [...users].sort((a, b) => a.age - b.age);
setUsers(sortedUsers);
};动态切换排序方式
可以结合状态来动态切换升序和降序：
const [sortConfig, setSortConfig] = useState({ key: 'name', direction: 'asc' });
const requestSort = (key) => {
let direction = 'asc';
if (sortConfig.key === key && sortConfig.direction === 'asc') {
direction = 'desc';
}
setSortConfig({ key, direction });
};
const sortedItems = React.useMemo(() => {
const itemsCopy = [...users];
if (sortConfig.key) {
itemsCopy.sort((a, b) => {
if (a[sortConfig.key] < b[sortConfig.key]) {
return sortConfig.direction === 'asc' ? -1 : 1;
}
if (a[sortConfig.key] > b[sortConfig.key]) {
return sortConfig.direction === 'asc' ? 1 : -1;
}
return 0;
});
}
return itemsCopy;
}, [users, sortConfig]);使用第三方库
对于更复杂的排序需求，可以使用如lodash的orderBy函数：
import _ from 'lodash';
const sortedUsers = _.orderBy(users, ['name'], ['asc']);渲染排序后的列表
在组件中渲染排序后的列表：
return (
<div>
<button onClick={() => requestSort('name')}>Sort by Name</button>
<button onClick={() => requestSort('age')}>Sort by Age</button>
<ul>
{sortedItems.map(user => (
<li key={user.id}>{user.name} - {user.age}</li>
))}
</ul>
</div>
);
