@buzuosheng-hooks

一个实用的 React Hooks 库，提供了常用的自定义 Hooks，帮助你更高效地处理防抖、状态管理、Web Worker 等功能。

✨ 特性

• 🔍 类型安全：使用 TypeScript 编写，提供完整的类型定义
• 📦 轻量级：无外部依赖（除 immer 和 shallowequal），体积小巧
• 🧪 测试完善：完整的单元测试覆盖
• 📃 文档详尽：每个 Hook 都有详细的文档和使用示例
• 🛠️ 优化性能：减少重渲染，优化计算任务

📦 安装

# 使用 npm
npm install @buzuosheng/hooks

# 使用 yarn
yarn add @buzuosheng/hooks

# 使用 pnpm
pnpm add @buzuosheng/hooks

注意：如果使用 useImmer Hook，还需要安装 immer 作为依赖。

🔨 使用示例

import { useDebounce, useImmer, useWorker } from '@buzuosheng/hooks';

// 防抖处理输入
function SearchComponent() {
  const [text, setText] = useState('');
  const debouncedText = useDebounce(text, 500);
  
  useEffect(() => {
    // 只在 debouncedText 变化时执行
    fetchSearchResults(debouncedText);
  }, [debouncedText]);
  
  return (
    <input 
      value={text}
      onChange={e => setText(e.target.value)}
      placeholder="搜索..."
    />
  );
}

// 使用 Immer 简化状态更新
function TodoApp() {
  const [todos, updateTodos] = useImmer([]);
  
  const addTodo = title => {
    updateTodos(draft => {
      draft.push({ id: Date.now(), title, completed: false });
    });
  };
  
  const toggleTodo = id => {
    updateTodos(draft => {
      const todo = draft.find(t => t.id === id);
      if (todo) todo.completed = !todo.completed;
    });
  };
  
  // ...组件其余部分
}

📚 可用 Hooks

• useDebounce — 用于处理防抖值的 Hook，避免频繁更新。
• useDebouncedCallback — 用于处理防抖函数的 Hook，附带取消和立即执行功能。
• useImmer — 用于简化不可变状态更新的 Hook，基于 Immer。
• useShallow — 用于优化状态更新的 Hook，支持浅比较和函数式更新。
• useWorker — 用于在 Web Worker 中执行耗时计算的 Hook，避免阻塞主线程。

📃 详细文档

每个 Hook 都有详细的文档，包括类型定义、参数说明、使用示例、注意事项等。点击上面的链接查看完整文档。

🔗 相关链接

• GitHub 仓库
• 问题反馈
• 贡献指南

📄 许可证

MIT © buzuosheng