react-flip-move结合array-move实现前端列表置顶效果

你有没有遇到这样的需求？点击左侧列表项，则像聊天会话窗口一样将被点击的列表项置顶。
如果只是单纯的置顶的话，直接使用array-move就可以实现了，但置顶效果多少有点突兀~

先上代码，直接使用array-move的情况（说明：本文只展示功能实现核心代码）

import { useState } from 'react';
import { arrayMoveImmutable } from 'array-move';const [list, setList] = useState([{id: 1,name: '小米手机'},{id: 2,name: '自然堂'},{id:3,name: '欧莱雅'},{id: 4,name: '新的会话'},{id: 5,name: '新的会话'}
])const getIndex = (item) => {return list.findIndex((current) => current.id === item.id)
}const handleSelectItem = (listItem) => {const currentIndex = getIndex(listItem)// 会话置顶const newList = arrayMoveImmutable(list, currentIndex,  0);setList(newList)
}return (<div className={styles.list}>{list.map((item) => {return (<divkey={item.id}onClick={() => handleSelectItem(item)}><div className='truncate w-190px'>{item.name}</div></div>)})}</div>
)

到这里，我们可以看到会话置顶的效果已经有了，但是就是有亿点点突兀，哈哈哈！

在这里插入图片描述

所以，我为了给它加一个平滑的过渡，找到了一个很好用的轮子，就是react-flip-move ，使用起来也非常方便，直接包裹一层就好啦

import FlipMove from 'react-flip-move';//...... 此处省略500行代码return <div className={styles.list}><FlipMove>{list.map((item) => {return (<divkey={item.id}onClick={() => handleSelectItem(item)}><div className='truncate w-190px'>{item.name}</div></div>)})}</FlipMove></div>