useMemo

最新推荐文章于 2024-09-04 16:04:13 发布
最新推荐文章于 2024-09-04 16:04:13 发布
阅读量671 收藏
点赞数 1
分类专栏： react 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56542349/article/details/128704776
版权

1. useMemo的作用

useMemo相当于vue的计算属性，只有当它所依赖的值发生变化的时候，useMemo才会重新返回一个新的值。

2. useMemo的返回值

如果用useMemo返回一个数据的话， 而这个数据里面一些是常量，一些是变量的话，只有对应的变量会发生变化，而其它的常量是不会变化的，所以如果要对useMemo的返回值进行一些splice操作的话，是无法起作用的。

因为其自己本身已经定义好的数据结构是没办法改变的，改变的只是里面的变量

呐呐呐呐。
关注
专栏目录
【vueUse库Utilities模块各函数简介及使用方法--第4篇】
xiejunlan的博客
07-30 923
vueUseUtilities函数useMemoize 函数使用方法构想中的 useOffsetPagination 函数使用方法usePrevious函数概述使用方法示例代码注意事项假设的useStepper函数使用方法假设的useSupported函数使用方法注意事项函数接收一个响应式引用（如ref或reactive对象中的属性）作为参数，并返回一个只读的响应式引用，该引用始终存储着传入引用的前一个值。当传入的引用发生变化时，返回的引用会更新为其之前的值。
深入了解 useMemo 和 useCallback
p1967914901的博客
09-21 4499
许多人对 `useMemo` 和 `useCallback`的理解和使用都不太正确，他们都对这两个钩子感到困惑。本文中的目标就是要澄清所有这些困惑。本文将学习它们是做什么的，为什么它们是有用的，以及如何最大限度地利用它们。 本文的目的是帮助初学者 or 中级 React 开发人员更好地使用 React。如果你刚刚开始使用 React，你可能会希望将这篇文章收藏起来，几周后再回来看它！
详解 useMemo 和 React.memo 的作用
chenyajundd的博客
04-10 1197
React 中的这两个函数都带有 memo，看着比较相似，但是作用和使用场景却不一致。memo 的英文含义为，可以理解为保存，记忆之类，从字面意思可以猜测到它的作用。可能没有实战的童鞋还容易把这两个搞混，但是这两个函数有着完全不一样的功能，也不需要拿来比较，千万不要搞混了，今天就带大家一起来详细的分析一下这两个函数的作用和使用场景！
react、vue 提供的 hook 函数对比
最新发布
web相关
09-04 1293
useMemo vs computed || useEffect vs watch
useMemo的使用
我的博客
10-17 2850
useMemo 的使用方法 useMemo的作用 useMemo 类似于Vue的计算属性，监听某个值的变化，根据变化的值重新计算新值； useMemo会缓存结果，如果监听的值没有发生变化，即使组件重新渲染，也不会重新发生计算，这个行为有助于避免在每个渲染上进行昂贵的计算 useMemo 的使用方法 import React, {useMemo, useState} from "react"; function Memo (){ const [count, setCount] = useSt
useMemo的使用简述
lijiamingyyds的博客
04-27 6407
一 useMemo的介绍 控制组件更新条件，可根据状态变化控制方法执行,优化传值，避免不必要的方法调用 useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化 接下来我们看看他到底是如何使用的 第一步创建一个函数父组件 初始化name和content并且在父组件中使用子组件Button 二子组件 我们可以发现这种写法无论父组件点击哪个按钮 都会执行onchangename方法，这样当我们只想改变其中一个的时候就会造成多
useCallback()和useMemo()的作用
hjhfreshman的博客
07-07 397
React.memo() React.useCallback() React.useMemo() React.memo() 问题 React 中当组件的 props 或 state 变化时，会重新渲染视图，实际开发会遇到不必要的渲染场景。看个例子： 子组件： function ChildComp () { console.log('render child-comp ...') return <div>Child Comp ...</div> } 父组件： function
详细解读 React useCallback & useMemo
grooyo的博客
11-15 181
阅读本文章需要对 React hooks 中 useState 和 useEffect 有基础的了解。我的这篇文章内有大致介绍 在 React 项目中全量使用 Hooks。简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回值。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。
React.memo和useMemo的区别及使用
百岁如流富贵冷灰的博客
01-27 7535
发现问题 大家在使用hook进行开发的时候有没有遇到过以下的情况： 当我set某一个值的时候，有好多不相关的值都重新进行了计算，当代码量较小的时候可能不明显，但是长此以往会让页面越来越卡。 父组件的某个值更新了，但是某些并没有引用这个值的子组件竟然也更新了。 以上的两种情况如果一直放任不管的话，随着代码的累计，页面的性能就会越来越差。当用class组件的时候我们可以通过PureComponent或者生命周期中的shouldComponentUpdate方法来进行优化，但是对于hooks要怎么做呢？ ho
useCallback 与 useMemo
如故的博客
09-03 481
useCallback 与 useMemo useCallBack 参数： 一个内联回调函数 依赖项数组 返回值： 该回调函数的 memoized 版本（可以理解为该回调函数被缓存起来了） 只有当依赖项发生改变时，这个回调函数才会重新生成。 使用场景举例： 如果你需要将一个函数作为props传给子组件，并且子组件内部进行了一些优化，比如判断一下props改变时才重新渲染。那么就可以将这个函数使用 useCallback 进行缓存，传入这个函数的 memoized 版本。当父组件更新时，这个 memo
react Hooks（useRef、useMemo、useCallback）实现原理
xbczrz的博客
12-08 919
react hooks useRef、useMemo、useCallback 实现原理
基于vue的记事本应用 vuememo - 更新
weixin_34392906的博客
02-28 159
新版本更新支持 Markdown 形式的笔记，支持导出 .png 格式的笔记图片，复制内容到剪贴板方便分享，支持将所有笔记数据导出为 JSON 格式的文件等。
useMemo和useCallback使用场景
wyh666csdn的博客
04-02 5325
简而言之，useMemo是用来缓存的。计算属性其实是函数的返回值，或者说指那些以返回一个值为目标的函数。有些函数，需要我们手动的去点击，去完成一些动作才触发。而有些函数，则是直接在渲染的时候就执行，在DOM区域被当作属性值一样去使用。后者，就被称为计算属性。而计算属性，最后一定会使用return返回一个值！
Day8:浅谈useMemo
weixin_42667381的博客
09-08 1042
通俗来讲就是说，当前组件或者当前组件所在的父组件修改状态（state）时，我们不想让其 render 函数中的某个节点或者自身因为不相关的状态变化而去重新渲染造成性能上的浪费，可以使用useMemo来解决这个问题。如果当前的依赖数组和上一次的依赖数组完全相同（即每个元素都严格相等），React 会认为依赖项没有变化，不会重新计算。中，第一个参数是一个计算函数。的依赖数组应该包含所有在计算函数中使用的变量，以确保在依赖项变化时重新计算。在这个阶段，React会比较当前的依赖数组和上一次渲染时存储的依赖数组。
useMemo useEffect
王可夫的博客
09-08 643
react
React高手都会用的useMemo有什么用的？
xuxian的博客
12-20 627
在 React 中，性能优化一直是开发者们关注的焦点之一。为了减少组件的重渲染和提高应用程序的性能，React 提供了一些钩子函数，其中之一就是 useMemo。本文将深入探讨 useMemo 的用法，展示它如何帮助我们优化 React组件。
React的memo和useMemo的作用
包磊磊的博客
04-27 989
要想学习useMemo必须要先知道React.memo 这两者都有一定的优化作用 memo的作用 当数据变化时，代码会重新执行一遍，但是子组件数据没有变化也会执行，这个时候可以使用memo将子组件封装起来，让子组件的数据只在发生改变时才会执行 案例 点击按钮改变n的值，m不变，验证程序会不会执行m的代码 不使用memo的情况 只改变n的值时，虽然说m的值没变，但是也执行了Child的打印语句 function App(){ const [n,setN] = useState(0);
useCallback 作用，useMemo ，memo作用 浅显理解
Embrace924的博客
06-22 510
项目中看到别人代码基本上每个函数都写了useCallback 于是去查了查到底有什么作用 快看睡着了还是没太明白，直接同事请教了一下 qian xia ni
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

呐呐呐呐。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值