写了一个 [排序只需要修改一个对象数据] 的模式

废话：
最近在对 notelive.cc 这个网站做一个新版本（不会替代这个网站，只是做一个新项目），然后遇到了目录树的排序老问题。

正题：
出于降低数据库写压力，简化初始化数据结构，以及我就是不喜欢排序要修改两个对象的个人原因等，因此做了这个排序模型。 实现效果：

1. 数据结构初始化不需要包含排序信息（个人业务需要，默认按照时间排序，本 demo 里按照 id 排序）
2. 排序时只需要修改拖动的对象的数据，不需要操作目标位置的对象。

有什么好的优化建议，也欢迎贴出来。

"use client"; import { useRef, useState } from "react"; interface Item { id: number; orderTime: number | undefined; pre: number | null | undefined; } let init: Item[] = [ { id: 1, orderTime: undefined, pre: undefined, }, { id: 4, orderTime: undefined, pre: undefined, }, { id: 2, orderTime: undefined, pre: 3, }, { id: 3, orderTime: undefined, pre: undefined, }, ]; export default function SortPage() { const source = useRef<HTMLInputElement>(null); const target = useRef<HTMLInputElement>(null); const [list, setList] = useState<Item[]>(init); const doSort = () => { if (!source.current || !source.current.value) { setList(reSort(list)); return; } const sourceItem = list.find( (item) => item.id == parseInt(source.current!.value) ); if (!sourceItem) { alert("not fount sourceItem"); return; } const targetItem = target.current!.value ? list.find((item) => item.id == parseInt(target.current!.value)) : null; // 只需要修改 sourceItem 的值，不用处理 targetItem if (!targetItem) { sourceItem.orderTime = Date.now(); sourceItem.pre = -1; } else { sourceItem.orderTime = Date.now(); sourceItem.pre = targetItem.id; } setList(reSort(list)); }; return ( <div> <div> <div> 移动的元素： <input className="border" ref={source} type="text" /> </div> <div> 目标元素的后面(留空首位)：{" "} <input className="border" ref={target} type="text" /> </div> <div> <button className="bg-gray-400 p-2" OnClick={doSort}> 移动 </button> </div> </div> <div className="mt-5 flex items-center justify-start gap-x-2 px-3"> {list.map((item) => { return ( <div className="bg-blue-100 p-2 " key={item.id}> <p>id: {item.id}</p> <p>orderTime: {item.orderTime}</p> <p>pre: {item.pre}</p> </div> ); })} </div> </div> ); } function reSort(originList: Item[]) { const list = [...originList]; const sortById = (pre: Item, next: Item) => { // id 从小到大排序 if (pre.id > next.id) { return 1; } else if (pre.id < next.id) { return -1; } return 0; }; const sortByOrderTime = (pre: Item, next: Item) => { let preOrderTime = pre.orderTime || 0; let nextOrderTime = next.orderTime || 0; // orderTime 从小到大排序 if (preOrderTime > nextOrderTime) { return 1; } else if (preOrderTime < nextOrderTime) { return -1; } return 0; }; list.sort(sortById).sort(sortByOrderTime); const checkList = [...list]; // 按照 orderTime 从旧到新，每个元素都执行一次 pre 位置调整处理，如果两个元素的 pre 相同，orderTime 最晚的则会插入到旧数据的前面 for (let i = 0; i < checkList.length; i++) { const checkItem = checkList[i]; if (checkItem.pre) { moveElementAfter(list, checkItem.id, checkItem.pre); } } function moveElementAfter( array: Item[], sourceId: number, targetItemId: number ) { const sourceIdx = array.findIndex((e) => e.id === sourceId); if (sourceIdx === -1) { return; } const sourceItem = array[sourceIdx]; const indexToInsert = list.findIndex((e) => e.id === targetItemId); array.splice(sourceIdx, 1); if (indexToInsert > -1) { array.splice(indexToInsert + 1, 0, sourceItem); // 在目标元素后面插入 } else { array.unshift(sourceItem); // 如果找不到元素 b ，则将元素 a 放在数组首位 } } return list; } 

文末： 如果大家对 notelive.cc 这个网站有什么建议，或对正在内测的新笔记产品有兴趣，或单纯想要唠唠嗑，可以加微信群哈。