怎么做国际货运代理外贸网站,开发平台需要什么技术,手机建设中网站首页,国内网络销售平台有哪些文章目录 useCallback的优缺点优点缺点JavaScript 的内联优化 使用场景 用了两年多的react#xff0c;今天抽空写点小内容 useCallback的优缺点 缓存了每次渲染时候 inline callback的实例 优点 关键点#xff1a;利用memoize减少无效的re-render#xff0c;通常配合shouldC… 文章目录 useCallback的优缺点优点缺点JavaScript 的内联优化 使用场景 用了两年多的react今天抽空写点小内容 useCallback的优缺点 缓存了每次渲染时候 inline callback的实例 优点 关键点利用memoize减少无效的re-render通常配合shouldComponentUpdate 或者 React.memo 起到减少不必要渲染的目的 性能优化useCallback可以帮助避免每次渲染的时候创建新的函数实例。这对于将函数作为props传递给子组件的时候特别有用因为子组件可以使用React.memo 来进行浅比较从而避免不必要的重新渲染依赖性控制 useCallback 接受一个依赖数组作为第二个参数使得你可以明确指定哪些变量的变化应该导致函数重新创建。这有助于精确控制依赖避免不必要的重新计算。
缺点
过度使用可能导致性能问题useCallback可能会阻止某些优化如内联增加复杂性在简单组件中使用useCallback 可能会显得过于繁琐因此优先考虑组件的复杂性和性能需求权衡是否使用useCallback可能引入bug如果依赖数组设置不当导致函数被错误缓存
JavaScript 的内联优化
内联优化内联指的是 将函数调用代码直接插入到调用处而不是通过函数调用方式执行这样可以减少函数调用的开销提高性能。当使用useCallback 包裹一个函数时候React 可能无法在一些情况进行内联因为useCallback返回的是同一个函数实例而不是新的函数
const memoizedCallback useCallback(() {// function body
}, [/* dependencies */]);// 内联优化可能受到影响
SomeComponent onClick{memoizedCallback} /对象缓存内联也与对象的创建和缓存有关。如果一个函数内部创建了对象并且该函数被useCallback缓存那么对象可能被缓存在在闭包中导致无法及时被垃圾回收。这可能会在长时间运行的应用中引起内存泄露问题
const memoizedCallback useCallback(() {const obj { key: value };// 使用 obj
}, [/* dependencies */]);// obj 可能无法及时被垃圾回收为了确保在不再需要时能够及时释放对象并触发垃圾回收你可以采取以下步骤
import { useCallback, useEffect, useRef } from react;const MyComponent () {const memoizedObject useRef(null);memoizedObject.current useCallback(() {const obj { key: value };// 使用 objreturn obj;}, [/* dependencies */]);// ...// 如果 memoizedObject 不再被使用设置为 null 或者清除引用useEffect(() {return () {// 清除对 memoizedObject 的引用// 这样在组件卸载或 memoizedObject 不再使用时可以及时触发垃圾回收memoizedObject.current null;};}, []);// ...
};在这个例子中我们使用 useEffect 来监听组件的生命周期并在组件即将卸载时执行清理操作。通过将 memoizedObject.current 设置为 null 或清除引用我们告诉垃圾回收器这个对象不再被需要。这有助于确保在组件卸载或不再需要时能够及时释放对象并触发垃圾回收。
请注意这里使用了 memoizedObject.current因为在 React Hooks 中我们经常使用 useRef 来保存可变的值并确保在组件重新渲染时保持其稳定性。如果你使用 useRef 来保存 memoizedObject你可以在 useEffect 中设置 memoizedObject.current 为 null 或清除引用。
使用场景
函数被 useEffect 内部所引用了但为了避免频繁的useEffect的频繁调用可以选择包一下需要保存一个函数闭包结果如配合 debounce、throttle使用useCallback包裹的函数但某个依赖项变化时引用这个函数的所有 useEffect 都得重新执行一下 最后分享一个外链Day383:说下 React 的 useEffect、useCallback、useMemo
