useDynamicList

一个帮助管理动态列表项的 React Hook。

演示

源码
[
  {
    "name": "Alice",
    "age": "20"
  },
  {
    "name": "Bob",
    "age": "21"
  },
  {
    "name": "Charlie",
    "age": "22"
  }
]

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

API

const [list, actions] = useDynamicLis(initialList)

初始列表 InitialList

任意的项目数组,默认为 []unknown[])。

返回值

export interface UseDynamicListReturnsActions<T> {
  /**
   * 在指定索引处插入项目
   */
  insert: (index: number, item: T) => void
  /**
   * 合并指定索引处的项目
   */
  merge: (index: number, items: T[]) => void
  /**
   * 替换指定索引处的项目
   */
  replace: (index: number, item: T) => void
  /**
   * 移除指定索引处的项目
   */
  remove: (index: number) => void
  /**
   * 获取指定索引处项目的键
   */
  getKey: (index: number) => number
  /**
   * 获取具有指定键的项目的索引
   */
  getIndex: (key: number) => number
  /**
   * 将项目从旧索引移至新索引
   */
  move: (oldIndex: number, newIndex: number) => void
  /**
   * 将项目添加到列表末尾
   */
  push: (item: T) => void
  /**
   * 从列表末尾弹出项目
   */
  pop(): void
  /**
   * 在列表开头添加项目
   */
  unshift: (item: T) => void
  /**
   * 从列表开头弹出项目
   */
  shift(): void
  /**
   * 根据指定结果对列表进行排序
   */
  sort: (result: T[]) => T[]
  /**
   * 重置列表
   */
  reset: (newList: T[]) => void
  /**
   * 设置新列表
   */
  setList: ReactSetState<T[]>
}

export type UseDynamicListReturns<T> = readonly [
  /**
   * 项目列表
   */
  list: T[],
  UseDynamicListReturnsActions<T>,
]