SuperAPI AI 工具集

react-hook-patterns

前端与建站

查看项目

更新于 10-15 22:41

技能介绍

用途:这是一份面向 React + TypeScript 的自定义 Hook 编写参考,用于在构建或审查 Hook 时避免闭包陈旧、缺少清理和依赖数组错误。

主要能力:

  1. 依赖数组正确性:Hook 回调中使用的每个响应式值(props、state、context 及其派生值)都应出现在依赖数组中;react-hooks/exhaustive-deps 可捕获多数问题,不应在未说明原因时禁用。可用 useRef 保存无需触发重跑的值以减少依赖。
  2. 清理模式:订阅、连接或分配资源的 effect 必须返回清理函数,示例覆盖事件监听、fetch 的 AbortController、定时器与 IntersectionObserver。
  3. 陈旧闭包防护:闭包在创建时捕获变量,存储的回调可能读到旧状态;可用函数式更新(如 setCount((prev) => prev + 1))或 ref 保存最新值。
  4. TypeScript 泛型:用泛型让 Hook 跨类型复用并保留推断,如 useLocalStorage<T>;可用约束泛型(T extends { id: string })。
  5. 常见配方:useDebounce、带判别联合状态的 useFetch、useMediaQuery。
  6. 组合:由小而专注的 Hook 组合出复杂行为,如 useOnlineStatus 与 useResilientFetch。
  7. 抽取时机:同一 useState + useEffect 组合出现在 3 个以上组件、组件有 5 个以上服务同一关注点的 Hook、或需独立于 UI 测试有状态逻辑时抽取;单个 useState、仅一处使用的逻辑或“以后可能用到”不应抽取。
  8. 反模式:参数超过 3 个应改用选项对象;缺少清理会导致内存泄漏与卸载后更新;事件处理器中的陈旧闭包;一个 Hook 承担过多职责应按关注点拆分。

使用方式:作为编写与代码审查时的对照参考,按上述模式检查 Hook 实现。

适用场景:React + TypeScript 项目中自定义 Hook 的设计、实现与评审。

限制:资料未提供安装命令、版本要求、许可或收费信息,暂未提供。