用途:该技能用于评估、设计或重构 React 组件与自定义 Hook,尤其当工作涉及提取 Hook、改变 Hook 职责或把依赖隐藏在自定义 Hook 之后时。不适用于与 React 无关的普通函数重构,或仅调用已验证的通用 Hook。
主要能力:提供一套判断标准。创建或建议自定义 Hook 前先自问:该逻辑能否用不含 React Hook 的普通函数或模块表达;Hook 的单一职责能否一句话说清;其依赖是否也是调用方应拥有的依赖;若删除并内联回调用方,代码是否更清晰。
优先替代方案:计算、数据转换、校验、API 调用优先用普通函数或模块;单个组件使用的事件处理或小型组合逻辑保留为组件本地逻辑;UI 职责过大或状态与控制流难追踪,应视为组件重设计信号,而非用 Hook 掩盖结构问题。
合理与不合理的 Hook:状态转换(如 useToggle、useDisclosure、useDebouncedValue)或 React 生命周期与副作用(如 useWindowSize、useIntersectionObserver、useQuery)为核心职责时,属于合理 Hook。仅重命名已有依赖的薄包装(如把 useQuery 包成 useUserProfileQuery)属于坏 Hook。业务逻辑 Hook 需具体判断,看职责是否清晰、是否隐藏调用方应知的依赖、是否把逻辑困在 Hook 内使组件无法控制流程。
限制与注意:长度、重复代码、调用点更整洁、更易测试都不是创建 Hook 的正当理由。Controller Pattern Hook 仅在项目已使用该模式、与组件 1:1、同目录、命名明确、不复用、职责不超出目标组件时可用。若被多个组件使用即为失败信号。自定义 Hook 不是缩短代码的工具。