useMemo和useCallback优缺点以及使用场景

已于 2022-09-14 10:37:57 修改
阅读量845 收藏 1
点赞数
文章标签： react.js 前端 reactjs
于 2022-03-07 20:22:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34574204/article/details/123338707
版权
本文详细介绍了React Hooks中的useMemo和useCallback的使用，它们都用于缓存以避免不必要的重新计算。useMemo主要用于缓存计算结果，优化状态变化时的性能，而useCallback则专注于缓存函数，防止因组件刷新导致的函数重复创建，提高应用性能。了解这两者的区别有助于更好地优化React应用。
摘要由CSDN通过智能技术生成

useMemo 和 useCallback 接收的参数都是一样

  1. 第一个参数为回调
  2. 第二个参数为要依赖的数据

共同作用：

依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用

两者区别

  1. useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ，应用场景如： 需要 计算的状态
  2. useCallback 计算结果是 函数, 主要用于 缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。
大莲芒
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
redux-hooks-api-play:使用新的Redux Hooks API并使用useMemo和useCallback处理性能问题
05-17
尝试使用带打字稿的新Redux钩子。 计划是比较连接和传统连接到商店的... 我也很好奇这些新钩子的性能以及它们如何与useMemo和useCallback结合使用。 添加了重新选择，但需要做一个用例，在多个组件实例中使用选择器。
optimization_with_react:一个简单的小项目，我将深入研究何时以及如何使用React.memo，useMemo和useCallback来优化您的应用程序
04-09
通过理解并适时使用`React.memo`、`useMemo`和`useCallback`，开发者可以显著提高React应用的性能，减少不必要的组件渲染，从而提供更流畅的用户体验。在实际项目中，这将有助于降低内存消耗，提高应用响应速度，并...
2020-09-29
hzxOnlineOk的博客
09-29 196
上一篇文章介绍了useEffect的使用，接下来准备介绍useCallback和useMemo。 回顾 在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于： 调用setState，就会触发组件的重新渲染，无论前后的state是否不同 父组件更新，子组件也会自动的更新 基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在
useMemo和useCallback的使用
hsany330的专栏
05-14 568
useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。 也就是说useMemo可以让函数在某个依赖项改变的时候才运行，这可以避免很多不必要的开销。举个例子： 不使用useMemo function Example
useCallback 和 useMemo 详解及区别
qq_56489674的博客
06-17 948
这两个 Hooks 都可以帮助我们优化性能，但它们的用途和返回值有所不同。主要用于避免在每次渲染时都重新创建函数，而useMemo主要用于避免在每次渲染时都进行复杂的计算和重新创建对象。
useMemo 或 useCallback的使用场景
weixin_43492777的博客
02-10 365
如果你的 function 因為需要用到 props 或 state 而必須在 component scope 裡面宣告、但又同時會被超過一個 使用時，就建議以 包起來。這樣可以確保當 props 或 state 改變時， 先跟著改變、進而觸發 的行為。 如果你傳給 的 function 裡面運算很繁重，例如可能要 map 一組很大的陣列，這時候可能就很值得用 把運算結果暫記起來下次用。
useMemo和useCallback使用场景
wyh666csdn的博客
04-02 4882
简而言之，useMemo是用来缓存的。计算属性其实是函数的返回值，或者说指那些以返回一个值为目标的函数。有些函数，需要我们手动的去点击，去完成一些动作才触发。而有些函数，则是直接在渲染的时候就执行，在DOM区域被当作属性值一样去使用。后者，就被称为计算属性。而计算属性，最后一定会使用return返回一个值！
useCallback 和 useMemo 的使用场景
最新发布
My_wife_QBL的博客
08-04 959
和useMemo是 React 中用于优化性能的重要工具。它们帮助开发者避免不必要的重新渲染和计算，从而提高应用的性能。在使用这两个 Hook 时，需要理解它们的工作原理和最佳实践，以便在适当的场景中有效地应用它们。通过合理使用和useMemo，开发者能够创建更加高效的 React 应用，显著提升用户体验。在实际开发中，结合性能分析工具和规范化的代码结构，可以更好地实现组件的性能优化。希望这篇文章能帮助你深入理解和useMemo的使用场景，从而在项目中充分利用它们的优势。
practice-react-optimization:使用钩子的Profiler扩展在React应用中的优化实践（useMemo，useCallback）
03-22
本实践项目聚焦于`useMemo`和`useCallback`这两个重要的优化钩子，它们能帮助我们减少不必要的重渲染，提升组件性能。以下是对这两个钩子的详细解释以及如何在实际应用中使用它们进行优化。 **useMemo** `useMemo`...
reactmemoization：useCallback和useMemo演练
02-11
Create React App入门该项目是通过。可用脚本在项目目录中，可以运行：npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新... 相反，它将所有配置文件和传递依赖项（webpack，Babel
react-memoization-hooks-2021-02-16:使用React Memo类，useCallback和useMemo控制性能的基本代码存储库
05-09
useCallback和useMemo控制性能在本课程中，我们将创建一个使用GitHub API数据的应用程序，并通过它可以浏览各种改进和性能分析的概念，我们将学习如何在我们的应用程序中使用诸如useMemo和useCallback类的钩子。...
useMemo和useCallback的区别 及使用场景
weixin_59141333的博客
10-30 1264
参考文章 useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据 共同作用： 1.仅仅 依赖数据 发生变化, 才会重新计算结果，也就是起到缓存的作用。 两者区别： 1.useMemo 计算结果是 return 回来的值, 主要用于 缓存计算结果的值 ， 应用场景如： 需要 计算的状态 2.useCallback 计算结果是 函数, 主要用于 缓存函数， 应用场景如: 在将一个组件中的函数，传递给子元素进行回调使用时，使用useCallback对函数进行处理
React hooks之useCallback的使用场景及其深度解读
hyupeng1006的博客
11-08 1629
1、useCallBack不是每个函数都需要使用！ 2、useCallBack在什么情况下使用？
React中的useMemo和useCallback：它们的区别及应用场景
alive_new的博客
04-10 2482
如果你在使用React时需要与非React库（例如，图表库、动画库等）协同工作，并且这些库需要使用函数作为参数，useCallback可以帮助你确保这些函数不会在每次渲染时重新创建，从而避免潜在的性能问题。如果你在使用React组件时集成了第三方库，而这些库的API调用结果依赖于组件的props或state，你可以使用useMemo来缓存这些API调用的结果，从而减少不必要的重绘或重排。当你的组件需要根据输入进行复杂的计算，而这些计算结果不会频繁变化时，使用useMemo可以避免在每次渲染时重复计算。
useMemo和useCallback的用法和区别
JackChan
01-11 999
useMemo和useCallback的用法和区别
react性能优化篇之useCallback的使用场景及其深度解读
热门推荐
lixiaonaaa的博客
08-26 1万+
useCallBack不要每个函数都包一下，否则就会变成反向优化，useCallBack本身就是需要一定性能的useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变useCallBack需要配合React.memo使用作者：工边页字链接：https://juejin.cn/post/7107943235099557896来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。...
react中useCallback和useMemo的使用场景，解决什么问题
混世小妲己
02-16 573
useCallback react钩子函数
【1024用代码改变世界】useMemo 和 useCallback｜React.memo使用场景
Coding and studying
10-22 3445
useMemo / useCallback都是React内置的用于性能优化的hook，它们常常被开发人员用来包裹（缓存memory），但是真的是所有的数据、函数、变量都需要使用useMemo / useCallback去缓存吗？可直接看结论。
useCallback 和 useMemo 及区别
ddwddw4的博客
02-20 7918
转载自https://blog.csdn.net/MFWSCQ/article/details/105136711 useCallback 可以理解为useMemo的语法糖。 主要区别是React.useMemo将调用fn函数并返回其结果，而React.useCallback将返回fn函数而不调用它。 useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); ...
useMemo和useCallBack的区别和使用场景
05-19
`useMemo` 和 `useCallback` 都是 React 中用来优化性能的 Hook。 `useMemo` 用于对计算结果进行缓存，避免重复计算。它接受两个参数：计算函数和依赖项数组。当依赖项数组中的任意一个元素发生变化时，`useMemo` 会重新计算结果并返回。如果依赖项没有发生变化，则 `useMemo` 直接返回上次的计算结果。 `useMemo` 的使用场景： - 计算某个耗时的、不经常改变的值，比如对一个长列表进行筛选、排序等操作时，可以使用 `useMemo` 对计算结果进行缓存。 - 避免不必要的渲染，比如在父组件传递一个函数给子组件时，可以使用 `useMemo` 缓存这个函数，避免因为父组件重新渲染导致子组件也重新渲染。 `useCallback` 用于缓存一个函数，避免函数的重复创建。它接受两个参数：回调函数和依赖项数组。当依赖项数组中的任意一个元素发生变化时，`useCallback` 会返回一个新的函数。如果依赖项没有发生变化，则 `useCallback` 直接返回上次缓存的函数。 `useCallback` 的使用场景： - 向子组件传递一个回调函数时，可以使用 `useCallback` 缓存这个函数，避免因为父组件重新渲染导致子组件也重新渲染。 - 当一个组件的某个函数依赖于其他状态或属性时，可以使用 `useCallback` 缓存这个函数，避免因为状态或属性的变化导致函数的重复创建。 需要注意的是，`useMemo` 和 `useCallback` 都是用来优化性能的，但是在大部分情况下并不是必需的。只有在组件的性能出现瓶颈时，才需要考虑使用这两个 Hook 进行优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值