SuperAPI AI 工具集

react-use-callback

前端与建站

查看项目

更新于 10-16 05:47

技能介绍

用途:帮助开发者决定在 React 代码中保留、添加还是移除 useCallback,核心目标是仅在函数标识稳定性确有需要时使用,不默认添加。

主要能力与规则:当回调标识会影响被 memo() 包裹的子组件时使用;包装自定义 Hook 返回的函数;优先把仅用于 effect 的函数移入 effect 内部;用更新函数(updater)减少对 state 的依赖;保持依赖数组完整。不要在循环中使用;子组件未 memo 时不要使用;没有证据表明需要时,简单交互不要使用。

典型用法:被 memo 的子组件中,const handleClick = useCallback(() => { trackClick(productId); }, [productId]); 自定义 Hook 返回值中,const navigate = useCallback((url) => { dispatch({ type: "navigate", url }); }, [dispatch]); 用更新函数减少依赖,const handleAddTodo = useCallback((text) => { setTodos((todos) => [...todos, { id: nextId++, text }]); }, []);

优先重构:把仅用于 effect 的辅助函数移入 effect;在 memo 化 props 前先保持 state 局部化;当包装层 state 不应导致子组件重渲染时,接受 JSX 作为 children;把循环项抽成组件,而不是在循环中调用 Hook。

调试:确认子组件已用 memo() 包裹;跨渲染记录依赖数组;检查不稳定的对象或数组依赖;在添加 memo 化前先移除不必要的提升 state。

输出:保留、添加或移除 useCallback;给出与标识稳定性相关的理由;提供完整依赖数组;当更简单的重构优于 memo 化时给出重构方案。

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