SuperAPI AI 工具集

react-hooks

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:该技能用于指导编写 React Hooks,核心原则是让 Effect 只负责同步外部系统,其余逻辑保留在渲染、事件处理器或自定义 Hook 中。

主要能力与规则:useEffect 仅用于订阅、定时器、网络生命周期、DOM API 等外部系统;避免每次渲染重建对象导致依赖不稳定,改用原始值、refs 或有节制的记忆化;当 Effect 逻辑需要最新 props/state 而不想扩大依赖时使用 useEffectEvent;用 useRef 存放可变、非渲染状态;仅在实测热点或记忆化子组件契约时添加 useMemo/useCallback;用 startTransition/useDeferredValue 处理非紧急更新;Effect 负责请求取消时使用 AbortController。

验证要点:Hooks 保持在顶层;订阅、挂载或调度的 Effect 需有清理;不要仅为从渲染状态派生渲染状态而写 Effect;依赖数组反映真实外部依赖;自定义 Hook 隐藏内部接线并暴露小 API。

性能检查清单:Hooks 是否在顶层调用、无循环或条件;对象/函数依赖是否有意为之;useEffect 订阅是否返回清理函数;组件是否过度重渲染。

反模式:不要通过禁用 linter 来忽略缺失依赖,应修正逻辑;不要写巨型 Effect,拆分无关同步关注点;不要用 Effect 同步派生状态,应在渲染时计算;重初始化用惰性状态 useState(() => heavy())。

限制:资料未提供具体安装命令、平台支持、收费或价格信息。