memo、useMemo和useCallback的区别

最新推荐文章于 2024-09-14 14:11:38 发布
最新推荐文章于 2024-09-14 14:11:38 发布
阅读量5.6k 收藏 22
点赞数 7
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaofanguan/article/details/106919196
版权

memo用来优化函数组件的重复渲染行为，当传入属性值都不变的情况下不会触发组件的重新渲染，否则就会触发组件的重新渲染；和类组件的PureComponent的功能是类似的；在hooks环境下，几乎所有组件都是函数式组件，我们使用memo的几率要比PureComponent高得多；

memo针对的是一个组件的渲染是否重复执行

而useMemo则定义了一段函数逻辑是否重复执行
本质都是用同样的算法来判定依赖是否发生改变，继而决定是否触发特定逻辑；（有很多这样的逻辑：输入和输出是对等的，相同的输入一定产生相同的输出，数学上称之为幂等）利用memo就可以避免不必要的重复计算，减少资源浪费。

所以严格来讲，不使用memo和useMemo不应该会导致你的业务逻辑发生变化（memo和useMemo只是用来做性能优化）​

useMemo和useEffect的语法是一样的，第一个参数是要执行的逻辑函数，第二个参数是这个逻辑函数依赖的变量组成的数组，如果不传第二个参数，则useMemo的逻辑函数每次都执行，那useMemo的意义就不存在了。如果传入空数组，则只执行一次；

useMemo和useEffect的执行时机是不一致的：useEffect执行的是副作用，所以一定是在渲染之后执行的，useMemo是需要有返回值的，而返回值可以直接参与渲染的，所以useMemo是在渲染期间完成的，有这样一个一前一后的区别

userMemo和useCallback接受的参数都是一样的，第一个参数为回调函数，第二个参数是要依赖的数据；

共同点：只有在依赖数据发生变化后，才会重新计算结果，起到缓存的作用

区别：useMemo返回的是计算的结果值，用于缓存计算后的状态
useCallback返回的是函数，主要用来缓存函数，因为函数式组件中的state的变化都会导致整个组件被重新刷新（即使一些函数没有必要被刷新），此时用useCallback就会将函数进行缓存，减少渲染时的性能损耗​；

栈先锋
关注
专栏目录
React.memo和useMemo的区别及使用
百岁如流富贵冷灰的博客
01-27 7526
发现问题 大家在使用hook进行开发的时候有没有遇到过以下的情况： 当我set某一个值的时候，有好多不相关的值都重新进行了计算，当代码量较小的时候可能不明显，但是长此以往会让页面越来越卡。 父组件的某个值更新了，但是某些并没有引用这个值的子组件竟然也更新了。 以上的两种情况如果一直放任不管的话，随着代码的累计，页面的性能就会越来越差。当用class组件的时候我们可以通过PureComponent或者生命周期中的shouldComponentUpdate方法来进行优化，但是对于hooks要怎么做呢？ ho
深入了解 useMemo 和 useCallback
p1967914901的博客
09-21 4492
许多人对 `useMemo` 和 `useCallback`的理解和使用都不太正确，他们都对这两个钩子感到困惑。本文中的目标就是要澄清所有这些困惑。本文将学习它们是做什么的，为什么它们是有用的，以及如何最大限度地利用它们。 本文的目的是帮助初学者 or 中级 React 开发人员更好地使用 React。如果你刚刚开始使用 React，你可能会希望将这篇文章收藏起来，几周后再回来看它！
memo、useCallback、useMemo三者的区别
world12312312的博客
05-21 1202
memo、useCallback、useMemo三者的区别 相同点 1.都是在函数式组件中使用 2.都是为了阻止子组件的被动渲染(父组件重新render，子组件也跟着render) 不同点 1.memo memo类似于PureCompoent 作用是优化组件性能，防止组件触发重渲染 不足: 如果参数中含有函数不能阻止 有点: 缓存组件 使用场景: 不给子组件传递函数，并且子组件根据自身以来渲染 2.useMemo useMemo其实和memo是一样的 不足: 如果参数中含有函数不能阻止 优点: 缓存变量(返
useMemo 和 useCallback 区别
weixin_43190804的博客
08-09 570
这两个 Hooks 都可以帮助我们优化性能，但它们的用途和返回值有所不同。useCallback 主要用于避免在每次渲染时都重新创建函数，而 useMemo 主要用于避免在每次渲染时都进行复杂的计算和重新创建对象。
浅谈memo、PureComponent、useMemo、useEffect、useCallback的区别
weixin_43883615的博客
06-04 606
在现在的react开发中，我们经常会使用的一些比较型的hook，都是为了提升性能，起到优化的目的。但是不能为了用而用，这东西不是用的越多越好，要视情况而定。下面讲几个常用的，并对比之间的区别。
useCallback和useMemo和memo用法、区别
CurtainR的博客
07-08 1053
useCallback 、useMemo、memo的用法以及区别 用法由来 当数据重新赋值时，整个组件会刷新渲染，当数据功能复杂且多，且部分数据无需刷新时，会被强制刷新，造成性能浪费，也可能会产出bug。那么这时候就需要用上useCallback和useMemo来缓存不需要重新加载的数据。 useCallback 的用法 假设存在A组件，A组件里存在函数F1，用法场景有： F1是组件加载时调用，里面有用到外部 ...
memo和useMemo的区别
最新发布
m0_61998604的博客
09-14 290
memo是用于避免组件的重复渲染。用于包装整个组件，依赖props变化。useMemo是用于缓存某个计算结果，避免每次渲染都重复执行这个计算。它缓存的是一个值，而不是整个组件。
【React】React.memo与useMemo的区别和联系
double_sweet1的博客
04-09 8024
概述 React.memo和useMemo都是React进行性能优化的手段，它们允许我们缓存需要进行高性能计算的结果，以便下次渲染页面时，返回缓存的值而不必重新计算函数，从而确保我们的应用程序运行的更快，避免不必要的开销。 React.memo 详解 为什么memo(memoization的简写)在React中这么重要呢？ 在React的组件中，如果子组件没有被React.memo包裹，或者没有使用useMemo来处理props传递参数，那么当父组件的任何值更新时，整个组件都将会进行重新渲染，包括父组件下面
详解React.memo、useMemo、useCallback
程序员界科比的博客
04-10 946
1：前言 最近开发中使用到了这几个API，这几个API不经常用，刚看到的时候理解也有点模糊，于是网上找了一些讲解并自己动手做了些实验，算是搞明白了。本文主要讲解React.memo、useMemo、useCallback的知识。 2：React.memo React.memo为高阶组件。 如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染..
optimization_with_react:一个简单的小项目，我将深入研究何时以及如何使用React.memo，useMemo和useCallback来优化您的应用程序
04-09
`React.memo`，`useMemo`和`useCallback`是React提供的三个重要工具，用于减少不必要的组件重新渲染，提升应用性能。下面我们将深入探讨这三个优化策略及其应用场景。 1. **React.memo** `React.memo` 是一个高阶...
useCallback 与 useMemo
如故的博客
09-03 474
useCallback 与 useMemo useCallBack 参数： 一个内联回调函数 依赖项数组 返回值： 该回调函数的 memoized 版本（可以理解为该回调函数被缓存起来了） 只有当依赖项发生改变时，这个回调函数才会重新生成。 使用场景举例： 如果你需要将一个函数作为props传给子组件，并且子组件内部进行了一些优化，比如判断一下props改变时才重新渲染。那么就可以将这个函数使用 useCallback 进行缓存，传入这个函数的 memoized 版本。当父组件更新时，这个 memo
React 之 useMemo 和 useCallback
subsistent的博客
08-19 139
因此，如果你在组件中执行了复杂的计算，并且这些计算结果不需要频繁更新，那么可以考虑使用 useMemo 优化组件性能总的来说，useMemo 适用于需要缓存计算结果的场景，useCallback 适用于缓存回调函数的场景。
React.memo() 和 useMemo() 的用法是什么，有哪些区别？
zz130428的博客
01-09 1609
简单来说，memoization 是一个过程，它允许缓存递归/昂贵的函数调用的值，以便下次使用相同的参数调用函数时，返回缓存的值而不必重新计算函数。，它接收一个组件A作为参数并返回一个组件B，如果组件B的 props（或其中的值）没有改变，则组件 B 会阻止组件 A 重新渲染。想象一下，有一个组件显示数以千计的数据，每次用户单击一个按钮时，该组件或树中的每条数据都会在不需要更新时重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括尚未更改其 values/props 的函数/组件。
【React】memo()、useCallback()、useMemo()的区别及使用场景
m0_61049675的博客
02-02 1677
每点击一次，子组件的useState、props和context都没有改变，但是每点击一次子组件都会重新渲染。: 如果直接使用useState解构的setName传给子组件, 子组件将不会重复渲染，即使用。：修改父组件的 onClick 方法，用 useCallback 钩子函数包裹一层。每点击一次父组件的按钮，子组件都会重新渲染；每点击一次父组件的按钮，子组件都会重新渲染；：将memo函数包裹子组件。
深入理解useMemo与useCallBack的区别
weixin_47981807的博客
08-21 637
useMemo与useCallBack的用处和使用场景
React-hooks React.memo 、 useMemo、 useCallback的使用区别
he_wen_jian的专栏
08-01 221
1:React.memo类似于PureComponent的作用，当父类传递的props发生变化时才会重新渲染 import React, { useState } from 'react'; import Child from '../Child'; function Parent() { const [parentCount, setParentCount] = useState(0); console.log('父組件重新渲染--------------'); return (
react之hook写法的useMemo和useCallback的区别
weixin_46190955的博客
10-13 476
useMemo缓存结果 useCallback缓存的是一个过程
memo()、useCallback()、useMemo() 区别使用详解
weixin_44339178的博客
08-16 733
memo()、useCallback()、useMemo() 区别使用详解
memo、useMemo和useCallback
Jinrong
04-20 274
memo memo用来优化函数组件的重复渲染行为，当传入属性值都不变的情况下不会触发组件的重新渲染，否则就会触发组件的重新渲染 const Product = memo(({ products, brands, keyWord }: any) => { return ( <View className={styles.product}> {products.map((product) => ( <SearchProductDetail
react memo, useEffect, useMemo, useRef, useState 方法含义
07-28
引用\[1\]:在React中，memo是一个高阶组件，用于优化函数组件的性能。它类似于React.PureComponent，通过对内部对象进行浅比较来判断是否重新渲染组件。\[2\]useEffect是React提供的一个Hook函数，用于在函数组件中执行副作用操作。它可以在组件渲染完成后执行一些异步操作，比如发送网络请求、订阅事件等。\[3\]useMemo是React提供的另一个Hook函数，用于在函数组件中进行性能优化。它可以缓存计算结果，避免重复计算，类似于Vue中的computed属性。\[1\]useRef是React提供的一个Hook函数，用于在函数组件中创建一个可变的引用。它可以用来保存组件的状态，或者获取DOM元素的引用。\[1\]useState是React提供的一个Hook函数，用于在函数组件中创建一个可变的状态。它返回一个数组，第一个元素是当前的状态值，第二个元素是更新状态的函数。 所以，react memo用于优化函数组件的性能，useEffect用于执行副作用操作，useMemo用于缓存计算结果，useRef用于创建可变的引用，useState用于创建可变的状态。 #### 引用[.reference_title] - *1* *2* [useMemo,memo,useRef等相关hooks详解](https://blog.csdn.net/weixin_44441196/article/details/117328033)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [一文轻松掌握react-hook(useState、useReducer、useEffect、useCallback、useMemo、useRef、useContext...)](https://blog.csdn.net/u010074572/article/details/105176653)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值