SuperAPI AI 工具集

react-hook

前端与建站

查看项目

更新于 10-15 17:30

技能介绍

用途:这是一份 React Hook 模式参考,用于向自定义 Hook 传递回调、修复 react-hooks/exhaustive-deps 的 ESLint 警告,以及排查组件意外重渲染的问题。

核心原则:传给 Hook 的回调必须用 useCallback 包裹;每个文件一个 Hook,按功能域组织;仅在逻辑被复用或足够复杂时才做抽象。自定义 Hook 需以 use 开头,不可条件调用,不可返回副作用,输入输出要有类型,并应能独立测试。关于 memoization,只有计算量大的逻辑才用 useMemo/useCallback,否则会降低可读性;例外是传给 Hook 的回调。

主要能力:给出内联回调导致 Hook 依赖变化、Hook 输出进入 useMemo、进而级联重渲染的问题模型;提供正确写法示例,即先用 useCallback 生成稳定引用再传给 Hook;并给出快速对照表:传回调给 Hook 就包 useCallback,ESLint 要求加依赖时先确认依赖是否稳定,Hook 输出每次渲染都变就反向追踪依赖链,组件每次按键都重渲染就检查 Hook 调用中的内联回调。

使用方式:出现重渲染时,先找到正在重建的 useMemo/useCallback,逐个检查依赖中哪个变了,再回溯该依赖为何变化,直到找到不稳定的根源,最后用 useCallback 加稳定依赖包裹根源。

适用场景与限制:适用于 React 组件与自定义 Hook 开发、ESLint 依赖警告处理、编辑器类组件(如 Quill 报 addRange(): The given range isn't in document)等重渲染调试。资料未提供安装命令、版本要求或平台信息。