useMemo useEffect

已于 2022-09-08 15:19:18 修改
阅读量630 收藏 1
点赞数
分类专栏： javascript 文章标签： 前端 javascript 开发语言
于 2022-09-08 11:13:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012441139/article/details/126760275
版权
本文详细解析了React Hooks中的useMemo和useEffect的区别及使用场景。useEffect在DOM更新后执行，常用于副作用管理；useMemo在DOM更新前触发，用于优化性能，特别是在处理引用类型和复杂计算时。同时，文章探讨了useCallback在传递函数作为props时的作用，以减少不必要的重渲染。了解这些Hook的正确用法对于提升React应用的性能至关重要。
摘要由CSDN通过智能技术生成

useMemo和useEffect有什么区别？(使用场景推荐阅读)_hsany330的博客-CSDN博客_usememo和useeffect的区别

什么时候使用useCallback和useMemo?_Windy_Coding的博客-CSDN博客_什么时候使用usecallback

userEffect:  setState时先触发DOM更新，然后触发effect，即：effect只能在DOM更新后再触发

userMemo：setState时触发DOM更新，DOM变化触发相应的Memo然后触发dom中的函数，即：memo是在DOM更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUpdate

但 react 的 hook（useEffect, useMemo, useCallback 等） 会有一个 deps array（第二个参数），而这些 hook 要不要再次被计算取决于本次 deps array 中的数据与上次 deps array 中的数据进行一次浅 diff，如果不相等则再次运行这个 hook，反之则不执行。

我们都知道在 js 在存储变量时，简单来说会把引用类型的地址存在数据栈中，而将值存在数据堆中，而浅 diff 的原理是比较二者在栈中存储的数据是否相同，并不关心堆中的情况

useMemo常用在以下两种场景的优化中：1）引用类型的变量   2）需要大量时间执行的计算函数。

当子组件接收一个函数props时，一般会使用useCallback来缓存这个函数，减少不必要的re-render

王可夫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Hook改变的React Component写法思路(2) - useCallback和useMemo
前端乱谈
05-12 4815
文章目录useCallback把匿名回调“存”起来useMemo保存一些计算值 useCallback把匿名回调“存”起来 在之前版本的文档和大牛的blog中都有提到避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用。 在Class component当中我们通常将回调函数声明为类成员： class MyComponent extends Re...
WorkLog:使用useReducer，useCallback，useEffect，useParams，useMemo，useState钩子创建工作日志应用
05-05
使用React Hooks创建工作日志应用 该应用程序的主要功能： 跟踪员工是否违反内部规章，根据该规章，内部剩不到3名医生时，不得离开部门。... useEffect; useParams; useMemo; useState。 检查应用程序的工作方式
usecallback usememo区别_React Hooks: 深入剖析 useMemo 和 useEffect
weixin_39759890的博客
11-21 1008
背景 最近 React 团队发布消息，称他们即将基于 Hooks 重写官方文档，Function Component 即将代替 Class Component 成为官方主推的开发方式。大家可能都开始慢慢从 Class Component 转向 Hooks，但是理想和现实还是有些差距，我们团队从 2019 年开始尝试使用 Hooks，事实也证明 Hooks 非常适合我们的业务场景，从一...
重温react-11(userMemo和useContext的使用方式)
最新发布
阿宝的博客
07-01 179
userMemo和useContext的使用方式
useCallback、useMemo、useEffect
weixin_41897680的博客
12-13 2497
useEffect 类组件中存在生命周期函数，为了使函数式组件具备类似声明周期的功能，react提供了useEffect，可以看作是componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 基础用法 定义一个函数和一个数组。函数体为组件初始化或变化时执行的代码，返回值为组件销毁前执行的代码。数组参数中放的是触发此函数的依赖项数据。 useEffect(() => { // 相当于 componentDidMount、
【React 钩子函数 useMemo以及useMemo和useEffect的区别】
z2000ky的博客
09-09 772
useMemo的使用方法和 useMome 与useEffect 的区别
useMemo和useEffect有什么区别？(使用场景推荐阅读)
热门推荐
hsany330的专栏
05-14 1万+
本文可能会让你感觉到很啰嗦，我想尽量线索清晰，但是好像有点失败... 1. 背景 先看下面这段代码 import React, {Fragment} from 'react' import { useState, useMemo } from 'react' // 产品名称列表 const nameList = ['apple', 'peer', 'banana', 'lemon'] const example = (props) => { // 产品名称、价格 co.
tiendaVirtual
05-05
前提条件 :clipboard: 克隆项目安装 :wrench: npm安装部署方式 :package: 运行npm运行build_ 然后运行npm start_内置 :hammer_and_wrench: React JS React钩useRef useContext useMemo useEffect useCallback ...
react-hooks-demo：此应用程序演示了React 16.8 Hooks的用法以及有关其各种用例的注释
02-14
React挂钩演示 该应用程序演示了React 16.8 Hooks的用法。 您可以找到同时使用类和钩子编写的应用程序逻辑，从而可以帮助您比较和关联它们。 语境 挂钩是使您能够“挂钩”功能组件中的React状态和生命周期功能的函数...
ReactGrammer:React开始
03-06
React문법 날짜 일 2월9일 zerocho를통한React의기초부터시작 2월10일 ref참조 class에서는 React.createRef...PureComponent useMemo useCallback useEffect useReducer 될때까지하라 해봤어？ ！[대체텍스트]（ 1“）
widget-react-hooks
04-21
除了useState和useEffect，React Hooks还包括其他一些有用的工具，如useContext（用于使用和订阅上下文），useReducer（处理更复杂的状态逻辑），useRef（存储可变值），以及自定义Hooks（如useCallback和useMemo）...
对useMemo使用的理解，以及与useEffect的区别
GCWsuger的博客
08-17 2837
对useMemo的理解 下面这个例子是想在页面上实时的显示出expensive函数的计算结果，但按照之前的写法，useState中任意的值发生改变时，页面都会重新渲染，导致昂贵的计算函数expensive会进行多余计算。 这个例子中无论是val还是count发生改变，函数都会运算一遍，但我们只想在count的值发生改变时才进行这个昂贵计算，因此就要用到useMemo。 import React, { useState, useMemo } from "react"; export default func
【react】useMemo和useEffect的相同点和不同点
当白的技术小窝 ( git : https://github.com/canwhite )
01-25 1777
1.相同点 两者在写法上有很大的相同之处 useMemo第一个参数需要返回一个函数，useEffect也可以返回一个函数 两者第二参数都可以放一个数组，里边的元素有着浅比较触发函数的作用 不同点 useMemo是dom更新前触发的，useuseEffect是dom更新后触发的 useMemo主要能和useCallback联合使用，利用其浅比较的能力和useCallback缓存函数的作用一起封装函数，见另一篇文章 useEffect主要用来模拟生命周期 post 【react】useCallback
react里useEffect、useMemo的区别
不怕麻烦的鹿丸的博客
05-27 2209
useEffect Effect Hook可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找dom useEffect类似于class组件中的生命周期函数，useEffect可以代替class组件中的三个生命周期，分别是： componentDidMount 组件渲染执行函数、 componentDidUpdate 组件更新执行的函数、 componentWillUnmount 组件销毁执行时函数 const [c..
useEffect、useMemo、useCallback使用场景分析
一杯清泉
08-20 3362
getName()会在每次组件渲染的时候执行dom，尽管name没有变化，我们需要让name变化的时候才渲染dom，否则保持原有的数据，这时候就用到了useMemo。
useEffect和useMemo区别
qq_44853234的博客
11-02 630
React中useEffect和useMemo区别 官方文档有说过 当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数，所以useEffect只能在DOM更新后再触发; 官方文档说不能在useMemo中操作DOM之类的副作用操作，不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo，useMemo是在DOM更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUp
useEffect和useMemo
m0_47999208的博客
11-30 482
useEffect会执行吗？只有数组里传了count才会执行，没有的话不会执行（但页面中的state还是响应式的，只是不会执行useEffect里面的内容）。useMemo的侧重点在缓存昂贵的计算,这点很像computed用法，如果不指定依赖，就不会执行。useEffect里所执行的大多都是副作用方法，操作dom,监听事件，请求数据等。每次点击=》状态发生改变会执行Example()函数，
React useMemo useCallback useEffect 的区别（保姆级教程）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-21 1158
在2023年我学起了React + TS 这个 “前端大佬” “高阶玩家” 标配的技术栈，一套学习下来个人总结就是：React真特么难用！传染病式的渲染逻辑是真让人难受！如何解决React组件抽风式的刷新问题，小编使用解释和源码示例的方式讲解一下
useEffect, useCallback, useMemo三者有何区别？
m0_57785190的博客
07-09 5120
useEffect useEffect可以帮助我们在DOM更新完成后执行某些副作用操作，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等 有了useEffect，我们可以在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情,具有: componentDidMount componentDidUpdate componentWillUnmount 基本用法 useEffect(()=>{ console.log('这是一个不含依赖...
react useMemo和useEffect区别
01-10
useMemo和useEffect是React中的两个钩子函数，它们有不同的用途和行为。 useMemo用于性能优化，它会在组件渲染过程中缓存计算结果，并在依赖项发生变化时重新计算。它接收两个参数：一个回调函数和一个依赖项数组。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值