React中的useCallback和useMemo

最新推荐文章于 2025-09-17 19:08:20 发布
原创 最新推荐文章于 2025-09-17 19:08:20 发布 · 373 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #前端框架

博客介绍了React中useCallback和useMemo的使用。useCallback可对函数进行记忆，解决自定义函数无记忆功能、无法复用的问题，需传入依赖数组。useMemo与useCallback类似，不过它返回的是函数体的运算结果，功能类似Vue的computed计算属性。

 useCallback

使用  这个useCallback  进行函数记忆   原因就是  我们useState  是可以 记住状态的

但是  我们自己定义的   是没有记忆的功能的

就算你每次++   它还是0

就不能复用

这样包裹一下  就算你重新set 状态

函数组件重新刷新  这个handleChange的函数  却会被缓存下来

如果  我们只传入 一个空数组

虽然 这个handleChange函数被缓存了下来

但是  里面的数据  却还是 当时的  并没有 随着之后的更新而进行更新

我们只需要 将这个函数的依赖传进这个数组里面就行了

这个useMemo

和useCallback  一样   但是  useCallback是将保存的函数体返回给你

而useMeno  是将保存的函数体的运算结果交给你

带上依赖!!!

写法如下

这个功能类似于 vue中的computed 计算属性

直接拿过来使用就行

 

湖边看客
关注
【React】useCallback和useMemo使用指南
读心悦
06-11 678
在组件内部使用。
【React篇】useMemo和useCallback的区别
AI小美好
06-21 630
【React篇】useMemo和useCallback的区别
useCallback 与 useMemo
如故的博客
09-03 589
useCallback 与 useMemo useCallBack 参数： 一个内联回调函数 依赖项数组 返回值： 该回调函数的 memoized 版本（可以理解为该回调函数被缓存起来了） 只有当依赖项发生改变时，这个回调函数才会重新生成。 使用场景举例： 如果你需要将一个函数作为props传给子组件，并且子组件内部进行了一些优化，比如判断一下props改变时才重新渲染。那么就可以将这个函数使用 useCallback 进行缓存，传入这个函数的 memoized 版本。当父组件更新时，这个 memo
useCallback和useMemo
small_cutey的博客
03-24 1797
useCallback和useMemo react-hooks
useMemo和useCallback
最新发布
wyzqhhhh的博客
09-17 767
如果缓存的值或函数本身计算成本很低（比如简单的加法、返回常量），使用它们反而会增加不必要的复杂度。重新创建函数），引发 bug。​：接受一个函数（需要缓存的函数）和一个依赖数组（依赖项变化时重新创建函数）。​：接受一个函数（返回需要缓存的值）和一个依赖数组（依赖项变化时重新计算）。包裹的子组件）时，避免因函数引用变化导致子组件不必要的重新渲染。​（当缓存的函数返回值是函数本身时，两者可互换，但语义更清晰）。​：返回缓存的函数实例，依赖未变化时复用之前的函数。​：返回函数计算的值，依赖未变化时直接复用缓存。
深入了解 useMemo 和 useCallback
p1967914901的博客
09-21 4775
许多人对 `useMemo` 和 `useCallback`的理解和使用都不太正确，他们都对这两个钩子感到困惑。本文中的目标就是要澄清所有这些困惑。本文将学习它们是做什么的，为什么它们是有用的，以及如何最大限度地利用它们。 本文的目的是帮助初学者 or 中级 React 开发人员更好地使用 React。如果你刚刚开始使用 React，你可能会希望将这篇文章收藏起来，几周后再回来看它！
useCallback 和 useMemo 详解及区别
qq_56489674的博客
06-17 1945
这两个 Hooks 都可以帮助我们优化性能，但它们的用途和返回值有所不同。主要用于避免在每次渲染时都重新创建函数，而useMemo主要用于避免在每次渲染时都进行复杂的计算和重新创建对象。
【React Hooks原理 - useCallback、useMemo】
weixin_44273311的博客
07-05 2157
从源码出发结合图文梳理了useCallback、useMemo这两个hook的基本原理和使用，以及解决了什么类型的问题
深入理解 React 性能优化：React.memo、useMemo 和 useCallback 的使用与区别
vvilkin的学习备忘
04-20 1542
在现代前端开发中，React 是一个非常流行的库，但随着应用规模的增大，性能问题逐渐成为开发者需要关注的重点。React 提供了一些强大的工具来帮助我们优化性能，其中最常用的就是 React.memo、useMemo 和 useCallback。本文将深入探讨它们的作用、使用场景以及区别，并通过实际示例帮助大家更好地理解和应用这些工具。
React Hooks memo、useMemo 以及 useCallback 的使用详解
why404
05-24 592
memo、useMemo 以及 useCallback 是三个常用的 React Hooks，它们可以帮助您优化组件的性能。但是，过度使用这些 Hooks 可能会降低代码的可读性和可维护性。因此，在使用这些 Hooks 之前，需要仔细考虑组件的性能需求。只有在子组件渲染成本比较高的情况下，才考虑使用 memo 缓存组件。只有在函数的计算成本比较高的情况下，才考虑使用 useMemo 缓存函数的返回值。只有在函数需要在多个地方使用的情况下，才考虑使用 useCallback 缓存函数的引用。
React中的useMemo和useCallback
MoaKap的专栏
06-29 685
React中的useMemo和useCallback 先看看二者的基本定义 useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 返回一个带有缓存（记忆）功能的值。 输入 create函数（用来创建/生成要缓存的值，所以叫create函数） 依赖项列表（指明什么时候需要重新计算并覆盖之前缓存的值） useMemo仅在某个依赖项改变时才会触发重新计算。这种优化可以避免在每次渲染时都进
useCallback和useMemo一点通
星海拾遗
04-12 898
useCallback和useMemouseCallback和useMemo的区别useMemouseCallback 首先从简单的讲一下两者的区别 useCallback和useMemo的区别 基本使用 // 贴上代码片利于复制 import { React, useState, useMemo, useCallback } from "react"; export default function TestPage() { const callBack = useCallback(() =&
React性能优化之useCallback与useMemo
u010651383的专栏
05-03 1299
React性能优化之useCallback与useMemo useMemo 当我们在写一个函数式组件时，经常会遇到非依赖的变量改变导致某些方法重新执行，造成性能浪费，这个时候，我们可以考虑使用useMemo对我们的值进行缓存，只有当这个值的依赖项改变时，我们采取重新执行方法获取新值，否则直接从缓存中获取上一次的值直接返回。 场景与示例 我们来看下面这段伪代码： function Demo(){ const [count, setCount] = useState<number>(0)
什么时候使用useCallback和useMemo?
WindyXYW的博客
08-09 3394
1. 什么是useCallback和useMemo？ useCallback 和 useMemo 都是react可用于性能优化的内置hooks。 两者的区别在于：useCallback缓存的是一个函数，而useMemo缓存的是计算结果。 其使用语法如下： // useCallback // 第一个参数是一个回调函数，useCallback会缓存这个函数，返回缓存的回调函数 // 第二个参数是依赖项，只有当依赖项改变时，才会重新创建这个函数 con...
useCallback 和 useMemo 及区别
MFWSCQ的博客
04-09 8501
useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 返回一个 memoized 回调函数 。 把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时...
React解密：React Hooks函数之useCallback和useMemo
lee前端技术站
08-06 1880
之所以将useCallback和useMemo放到一起，从某种意义上说，他们都是性能优化的始作俑者，他们也有很多的共性。我们先来回顾一下class组件性能优化的点： 调用setState，就会触发组件的重新渲染，无论前后state是否相同 父组件更新，子组件也会自动更新 介于这俩点，我们一般使用immutable进行比较，在不相等的时候调用setState， 在shouldComponentUpdate中判断前后的props和state，如果没有变化，则返回false来阻止更新...
一文讲透useMemo和useCallback
caixin185的博客
07-24 5115
相同点：useCallback 和 useMemo 都是性能优化的手段，类似于类组件中的 shouldComponentUpdate，在子组件中使用 shouldComponentUpdate， 判定该组件的 props 和 state 是否有变化，从而避免每次父组件render时都去重新渲染子组件。不同点：useCallback 和 useMemo 的区别是useCallback返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件。
useMemo、useCallback简单理解
包磊磊的博客
04-26 828
1、useMemo、useCallback都是使参数（函数）不会因为其他不想关的参数变化而重新渲染。 （1）useMemo 1 2 3 const memoDom = useMemo(() => { return<div>{memoValue}</div> }, []) （2）useCallback 1 const callbackTest = useCallba...
React性能优化实践：使用Memo, useCallback和useMemo钩子
它表明存储库是关于React Hooks中的性能优化技术，特别是`React.memo`，`useCallback`和`useMemo`这几个API的使用。 ### 描述分析 描述部分详细介绍了本课程的内容和目标，说明了如何通过创建一个基于GitHub API...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值