useSelection

一个实用的 React Hook，提供 Selection 相关功能。

功能特性

• ✅ 核心功能: 提供 Selection 的核心功能
• ✅ 类型安全: 完整的 TypeScript 类型支持
• ✅ 易于使用: 简洁的 API 设计
• ✅ 性能优化: 高效的实现方式
• ✅ 自动清理: 组件卸载时自动清理资源

基本用法

import useSelection from "./useSelection";

function Component() {
  const result = useSelection();
  
  return <div>使用 useSelection</div>;
}

高级用法

实际应用场景

function AdvancedComponent() {
  const hookResult = useSelection(/* 参数 */);
  
  // 根据具体 hook 的功能进行使用
  
  return (
    <div>
      {/* 渲染内容 */}
    </div>
  );
}

API 参考

useSelection(params?)

参数

根据具体 hook 的功能确定参数类型和说明。

返回值

根据具体 hook 的功能确定返回值类型和说明。

使用场景

1. 场景一: 描述具体的使用场景
2. 场景二: 描述另一个使用场景
3. 场景三: 描述更多使用场景

注意事项

1. 性能: 注意性能相关的使用建议
2. 兼容性: 浏览器兼容性说明
3. 最佳实践: 推荐的使用方式

兼容性

• ✅ React 16.8+
• ✅ TypeScript 4.0+
• ✅ 现代浏览器
• ✅ 服务端渲染 (SSR)

实现源码

查看 useSelection 的实现

import { useSafeState, useCreation } from "ahooks";

const useSelection = <T>(list: T[], intialValues: T[] = []) => {
  const [selected, setSelected] = useSafeState<T[]>(intialValues);

  const selectedSet = useCreation(
    () => new Set(Array.from(selected)),
    [selected]
  );

  const isSelected = (data: T) => selectedSet.has(data);

  //增加
  const selectAdd = (data: T | T[]) => {
    if (Array.isArray(data)) {
      data.map((item) => selectedSet.add(item));
    } else {
      selectedSet.add(data);
    }
    return setSelected(Array.from(selectedSet));
  };

  //删除
  const selectDel = (data: T | T[]) => {
    if (Array.isArray(data)) {
      data.forEach((item) => selectedSet.delete(item));
    } else {
      selectedSet.delete(data);
    }
    return setSelected(Array.from(selectedSet));
  };

  //设置
  const setSelect = (data: T | T[]) => {
    selectedSet.clear();
    if (Array.isArray(data)) {
      data.forEach((item) => selectedSet.add(item));
    } else {
      selectedSet.add(data);
    }
    return Array.from(selectedSet);
  };

  //状态切换
  const toggle = (data: T) => {
    isSelected(data) ? selectDel(data) : selectAdd(data);
  };

  //全部未选中
  const noneSelected = useCreation(() => {
    return list.every((item) => !selectedSet.has(item));
  }, [list, selectedSet]);

  // 全部选中
  const allSelected = useCreation(() => {
    return list.every((item) => selectedSet.has(item));
  }, [list, selectedSet]);

  // 是否半选
  const partiallySelected = useCreation(
    () => !noneSelected && !allSelected,
    [noneSelected, allSelected]
  );

  // 全选
  const selectAll = () => {
    list.map((item) => selectedSet.add(item));
    setSelected(Array.from(selectedSet));
  };

  //全不选
  const unSelectAll = () => {
    list.map((item) => selectedSet.delete(item));
    setSelected(Array.from(selectedSet));
  };

  const toggleAll = () => (allSelected ? unSelectAll() : selectAll());

  return {
    selected, // 以选择的元素组
    isSelected, // 是否被选中
    selectAdd,
    selectDel,
    toggle,
    setSelect,
    noneSelected,
    allSelected,
    partiallySelected,
    selectAll,
    unSelectAll,
    toggleAll,
  } as const;
};

export default useSelection;