本技能资料围绕 React 的 useCallback Hook 展开,核心原则是:useCallback 只用于针对性的性能优化,而非默认添加。
适用范围包括:向被 memo() 包裹的子组件传递回调函数,避免因每次渲染生成新函数导致子组件无谓重渲染;当函数作为 useEffect 依赖项时使用;始终为自定义 Hook 返回的函数进行包裹;通过更新函数(updater function)减少对 state 的依赖。
不适用场景包括:子组件未使用 memo() 时包裹毫无意义;页面级导航等粗粒度交互无需该优化;当可以用接受 JSX 作为 children、或将 state 保持在局部等更好的方式改写时,不应强行使用。
需要避免的反模式:遗漏依赖数组会令每次渲染返回新函数;在循环或 map 中调用 Hook 违反 Hook 规则,应将逻辑提取为独立组件或改用 memo 包裹。
与 useMemo 的区别:useCallback(fn, deps) 缓存函数本身,适合回调属性;useMemo(() => fn, deps) 缓存函数调用结果,适合计算值,二者可互相等价实现。调试时可打印依赖项,并用 Object.is 逐一比较前后依赖是否相同。资料还提到 React Compiler 未来可自动完成记忆化,从而减少手写 useCallback 的需要。
资料未提供该技能的安装命令、价格或平台信息,暂未提供。