react中useCallback和useMemo的使用场景，解决什么问题

已于 2022-02-16 16:12:53 修改
阅读量562 收藏
点赞数
文章标签： react.js javascript reactjs
于 2022-02-16 15:37:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangjing0320/article/details/122964787
版权

https://segmentfault.com/q/1010000040866450
https://www.jianshu.com/p/014ee0ebe959

useCallback是缓存函数，useMemo是缓存计算属性值

useCallback解决：

  1. 有一个场景，可以解决函数作为依赖项导致的死循环问题
  2. useCallback其实是利用memoize减少不必要的子组件重新渲染（useCallback的实参函数读取的变量是变化的（一般来自state, props）

useMemo

useMemo可以理解成就是vue的computed函数，只有依赖项在变化的时候才会重新计算，否则就拿缓存里的值

街边吃垃圾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
什么时候使用useCallback和useMemo?
WindyXYW的博客
08-09 2952
1. 什么是useCallback和useMemo？ useCallback 和 useMemo 都是react可用于性能优化的内置hooks。 两者的区别在于：useCallback缓存的是一个函数，而useMemo缓存的是计算结果。 其使用语法如下： // useCallback // 第一个参数是一个回调函数，useCallback会缓存这个函数，返回缓存的回调函数 // 第二个参数是依赖项，只有当依赖项改变时，才会重新创建这个函数 con...
optimization_with_react:一个简单的小项目，我将深入研究何时以及如何使用React.memo，useMemo和useCallback来优化您的应用程序
04-09
通过理解并适时使用`React.memo`、`useMemo`和`useCallback`，开发者可以显著提高React应用的性能，减少不必要的组件渲染，从而提供更流畅的用户体验。在实际项目中，这将有助于降低内存消耗，提高应用响应速度，并...
一篇文章带你理解 React 中最“臭名昭著”的 useMemo 和 useCallback
weixin_47077674的博客
01-11 1080
作为一个 React 开发者，如果你一直觉得useMemo和这两个 Hook 比较难以理解，那么别害怕，事实上很多人都如此。我和其他公司很多的 React 开发者交流过，大多数对这两个 Hook 都是一知半解的状态。这篇文章就为你答疑解惑，为大家介绍这两个 Hook 的具体作用，它们的实现原理以及在实际开发中如何应用。我最喜欢的自定义 hook 之一是useTogglev);} , [ ]);注意这里的toggle函数使用了进行缓存。
React中的useMemo和useCallback：它们的区别及应用场景
最新发布
alive_new的博客
04-10 1712
如果你在使用React时需要与非React库（例如，图表库、动画库等）协同工作，并且这些库需要使用函数作为参数，useCallback可以帮助你确保这些函数不会在每次渲染时重新创建，从而避免潜在的性能问题。如果你在使用React组件时集成了第三方库，而这些库的API调用结果依赖于组件的props或state，你可以使用useMemo来缓存这些API调用的结果，从而减少不必要的重绘或重排。当你的组件需要根据输入进行复杂的计算，而这些计算结果不会频繁变化时，使用useMemo可以避免在每次渲染时重复计算。
React解密：React Hooks函数之useCallback和useMemo
lee前端技术站
08-06 1790
之所以将useCallback和useMemo放到一起，从某种意义上说，他们都是性能优化的始作俑者，他们也有很多的共性。我们先来回顾一下class组件性能优化的点： 调用setState，就会触发组件的重新渲染，无论前后state是否相同 父组件更新，子组件也会自动更新 介于这俩点，我们一般使用immutable进行比较，在不相等的时候调用setState， 在shouldComponentUpdate中判断前后的props和state，如果没有变化，则返回false来阻止更新...
useMemo和useCallback使用场景
wyh666csdn的博客
04-02 3237
简而言之，useMemo是用来缓存的。计算属性其实是函数的返回值，或者说指那些以返回一个值为目标的函数。有些函数，需要我们手动的去点击，去完成一些动作才触发。而有些函数，则是直接在渲染的时候就执行，在DOM区域被当作属性值一样去使用。后者，就被称为计算属性。而计算属性，最后一定会使用return返回一个值！
React中useMemo的简单使用
u010234868的专栏
09-20 9983
useMemo使用场景，比如有两个变量（依赖项），只需要在其中一个变量变化时发生变化，否则拿缓存的值；或者其中另一个变量的变化不需要引起重新计算时使用。该属性类似于vue中的计算属性，有返回值。useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。useMemo主要用来解决使用React hooks产生的无用渲染的性能问题，用来做缓存用。
react-demos:react 从 0 到 0.1
05-22
demo17: React 中传送门 createPortal 的使用方式和场景 demo18: 常用的组件优化方案：Fragment、PureComponent、memo demo19: 函数组件中方法以及变量的缓存方案 useCallback、useMemo react-context Context 各种 ...
react-react面试题之性能优化的手段.zip
03-20
9. **优化生命周期方法**：在旧版本的React中，`componentWillMount`和`componentWillReceiveProps`等生命周期方法常被用于优化，但在新版本中，推荐使用新的生命周期方法如`getDerivedStateFromProps`和`...
Game-of-thrones-React:React Hooks中GOT角色和房屋的应用
03-05
总的来说，这个项目展示了React Hooks在实际场景中的应用，通过JavaScript实现了《权力的游戏》角色和房屋信息的展示。它利用React Hooks简化了状态管理、副作用处理、性能优化等多个方面，体现了现代React开发的...
react-ReactVertex用于React基于Hooks的WebGL库
08-15
4. **优化性能**：React Vertex考虑了性能问题，例如使用useMemo和useCallback来避免不必要的计算和渲染，以及智能地管理WebGL资源以减少内存开销。 5. **组合和复用组件**：遵循React的组件化思想，你可以创建可...
2020-09-29
hzxOnlineOk的博客
09-29 183
上一篇文章介绍了useEffect的使用，接下来准备介绍useCallback和useMemo。 回顾 在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于： 调用setState，就会触发组件的重新渲染，无论前后的state是否不同 父组件更新，子组件也会自动的更新 基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在
解决React useEffect钩子带来的无限循环问题
lilythy2016的博客
05-19 534
解决React useEffect钩子带来的无限循环问题
面试官：如何解决React useEffect钩子带来的无限循环问题
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
05-07 2530
React的useEffect Hook可以让用户处理应用程序的副作用。例如: 从网络获取数据:应用程序通常在第一次加载时获取并填充数据。这可以通过useEffect函数实现 操作UI:应用程序应该响应按钮点击事件(例如，打开一个菜单) 设置或结束计时器:如果某个变量达到预定义值，则内置计时器应自行停止或启动 尽管useEffect Hook在React生态系统中很常见，但它需要时间来掌握。因此，许多新手开发人员在配置他们的useEffect函数时，会导致无限循环问题。在本文中，您将了解不同场景下带来的
介绍React.memo, useMemo 和 useCallback
前端精髓
01-16 7688
什么是 React.memo ？ React.memo 和 React.PureComponent 类似， React.PureComponent 在类组件中使用，而React.memo 在函数组件中使用 https://dev.to/dinhhuyams/introduction-to-react-memo-usememo-and-usecallback-5ei3 ...
react简单入门--常用hook中useMemo的使用（详细版）
热门推荐
m0_46694056的博客
12-28 2万+
前言： 作用： 首先useMemo它使用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则拿缓存的值，就不用在每次渲染的时候再做计算 场景： 既然是用作缓存来用，那场景就可能有： 比如说当你登陆之后，你的个人信息一般是不会变的，当你退出登陆，重新输入另外一个人的账号密码之后，这个时候个人信息可能就变了，那这样我就可以把账号和密码`两个作为依赖项，当他们变了，那就更新个人信息，否则拿缓存的值，从而达到优化的目的 也许当你从A页面跳转到B页面，而B页面 ...
【1024用代码改变世界】useMemo 和 useCallback｜React.memo使用场景
Coding and studying
10-22 3394
useMemo / useCallback都是React内置的用于性能优化的hook，它们常常被开发人员用来包裹（缓存memory），但是真的是所有的数据、函数、变量都需要使用useMemo / useCallback去缓存吗？可直接看结论。
useMemo 或 useCallback的使用场景
weixin_43492777的博客
02-10 335
如果你的 function 因為需要用到 props 或 state 而必須在 component scope 裡面宣告、但又同時會被超過一個 使用時，就建議以 包起來。這樣可以確保當 props 或 state 改變時， 先跟著改變、進而觸發 的行為。 如果你傳給 的 function 裡面運算很繁重，例如可能要 map 一組很大的陣列，這時候可能就很值得用 把運算結果暫記起來下次用。
react hook之useMemo
qq_44436257的博客
02-08 1735
useMemo是用来缓存计算属性的，它会在发现依赖未发生改变的情况下返回旧的计算属性值的地址。 useMemo绝不是用的越多越好，缓存这项技术本身也需要成本。 useMemo的使用场景之一是:只需要给拥有巨大计算量的计算属性缓存即可。 useMemo的另一个使用场景是：当有计算属性被传入子组件，并且子组件使用了react.memo进行了缓存的时候,为了避免子组件不必要的渲染时使用
useCallback 和 useMemo 的使用场景
04-21
useCallback 和 useMemo 都是用来优化 React 应用性能的钩子函数，但是它们的使用场景略有不同。 useCallback 用于优化函数组件的性能，当子组件传递函数给父组件时，如果每次组件更新都会创建一个新的函数引用，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值