【react】useMemo和useEffect的相同点和不同点

最新推荐文章于 2023-11-30 02:19:05 发布
最新推荐文章于 2023-11-30 02:19:05 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： React 文章标签： useEffect useMemo 相同点 不同点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dangbai01_/article/details/113143275
版权
1.相同点

两者在写法上有很大的相同之处
useMemo第一个参数需要返回一个函数，useEffect也可以返回一个函数
两者第二参数都可以放一个数组，里边的元素有着浅比较触发函数的作用

不同点

useMemo是dom更新前触发的，useuseEffect是dom更新后触发的
useMemo主要能和useCallback联合使用，利用其浅比较的能力和useCallback缓存函数的作用一起封装组件，见另一篇文章
useEffect主要用来模拟生命周期

post

【react】useCallback和useMemo的真正区别和配合使用实例

当白
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-demo：上下文和useEffect
02-13
在React开发中，`context`（上下文）和`useEffect`是两个非常重要的概念，它们帮助我们构建更高效、可复用且易于管理状态的组件。在这个名为"react-demo"的项目中，我们将深入探讨这两个特性。 首先，让我们来了解...
利用angular、react和vue实现相同的面试题组件
08-27
eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
usecallback usememo区别_React Hooks: 深入剖析 useMemo 和 useEffect
weixin_39759890的博客
11-21 966
背景 最近 React 团队发布消息，称他们即将基于 Hooks 重写官方文档，Function Component 即将代替 Class Component 成为官方主推的开发方式。大家可能都开始慢慢从 Class Component 转向 Hooks，但是理想和现实还是有些差距，我们团队从 2019 年开始尝试使用 Hooks，事实也证明 Hooks 非常适合我们的业务场景，从一...
对useMemo使用的理解，以及与useEffect的区别
GCWsuger的博客
08-17 2805
对useMemo的理解 下面这个例子是想在页面上实时的显示出expensive函数的计算结果，但按照之前的写法，useState中任意的值发生改变时，页面都会重新渲染，导致昂贵的计算函数expensive会进行多余计算。 这个例子中无论是val还是count发生改变，函数都会运算一遍，但我们只想在count的值发生改变时才进行这个昂贵计算，因此就要用到useMemo。 import React, { useState, useMemo } from "react"; export default func
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.
【React 钩子函数 useMemo以及useMemo和useEffect的区别】
z2000ky的博客
09-09 668
useMemo的使用方法和 useMome 与useEffect 的区别
react里useEffect、useMemo的区别
不怕麻烦的鹿丸的博客
05-27 2165
useEffect Effect Hook可以让你在函数组件中执行副作用操作，这里提到副作用，什么是副作用呢，就是除了状态相关的逻辑，比如网络请求，监听事件，查找dom useEffect类似于class组件中的生命周期函数，useEffect可以代替class组件中的三个生命周期，分别是： componentDidMount 组件渲染执行函数、 componentDidUpdate 组件更新执行的函数、 componentWillUnmount 组件销毁执行时函数 const [c..
React useMemo useCallback useEffect 的区别（保姆级教程）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-21 1074
在2023年我学起了React + TS 这个 “前端大佬” “高阶玩家” 标配的技术栈，一套学习下来个人总结就是：React真特么难用！传染病式的渲染逻辑是真让人难受！如何解决React组件抽风式的刷新问题，小编使用解释和源码示例的方式讲解一下
REACT__useEffect
02-16
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm ...
React框架教程和案例的信息
06-12
10. **案例分析**：教程中可能包含不同类型的React应用案例，如计数器、天气查询、社交网络功能等，通过实践加深对React的理解。 在《React框架教程和案例的信息.pdf》这份文档中，你将系统学习React的基本概念、...
React框架教程案例和资源.zip
最新发布
06-20
- React组件有不同的生命周期阶段，包括挂载（Mounting）、更新（Updating）和卸载（Unmounting），每个阶段都有相应的生命周期方法，如`componentDidMount`、`shouldComponentUpdate`和`componentWillUnmount`等。...
useCallback、useMemo、useEffect
weixin_41897680的博客
12-13 2413
useEffect 类组件中存在生命周期函数，为了使函数式组件具备类似声明周期的功能，react提供了useEffect，可以看作是componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 基础用法 定义一个函数和一个数组。函数体为组件初始化或变化时执行的代码，返回值为组件销毁前执行的代码。数组参数中放的是触发此函数的依赖项数据。 useEffect(() => { // 相当于 componentDidMount、
useEffect和useMemo
m0_47999208的博客
11-30 471
useEffect会执行吗？只有数组里传了count才会执行，没有的话不会执行（但页面中的state还是响应式的，只是不会执行useEffect里面的内容）。useMemo的侧重点在缓存昂贵的计算,这点很像computed用法，如果不指定依赖，就不会执行。useEffect里所执行的大多都是副作用方法，操作dom,监听事件，请求数据等。每次点击=》状态发生改变会执行Example()函数，
useEffect, useCallback, useMemo三者有何区别？
m0_57785190的博客
07-09 5095
useEffect useEffect可以帮助我们在DOM更新完成后执行某些副作用操作，如数据获取，设置订阅以及手动更改 React 组件中的 DOM 等 有了useEffect，我们可以在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情,具有: componentDidMount componentDidUpdate componentWillUnmount 基本用法 useEffect(()=>{ console.log('这是一个不含依赖...
useEffect、useMemo、useCallback使用场景分析
一杯清泉
08-20 3230
getName()会在每次组件渲染的时候执行dom，尽管name没有变化，我们需要让name变化的时候才渲染dom，否则保持原有的数据，这时候就用到了useMemo。
useEffect和useMemo区别
qq_44853234的博客
11-02 611
React中useEffect和useMemo区别 官方文档有说过 当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数，所以useEffect只能在DOM更新后再触发; 官方文档说不能在useMemo中操作DOM之类的副作用操作，不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo，useMemo是在DOM更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUp
React新特性hooks中memo,usememo,useCallback的区别
weixin_42450794的博客
07-31 1万+
useMemo memo类似于PureCompoent 作用是优化组件性能，防止组件触发重渲染 memo针对 一个组件的渲染是否重复执行 <Foo /> usememo针对 一段函数逻辑是否重复执行 ()=>{} useEffect是在渲染之后完成的 useMemo是在渲染期间完成的 useMemo(()=>{},[]) 参数如果是空数组的话就只会执...
react hook函数组件之 useMemo、useCallback 、useRef
weixin_43828291的博客
04-10 3433
要想学习useMemo、useCallback 必须要先知道React.memo memo的作用: 当父组件数据变化时，代码会重新执行一遍，但是子组件数据没有变化也会跟随执行，这个时候可以使用memo将子组件封装起来，让子组件的数据只在发生改变时才会执行,节约子组件渲染的性能开销(一定要注意一点，useMemo、useCallback做性能优化时子组件要用memo包裹，没有这个前提，useMemo、useCallback优化是没用的！） 简单来说useMemo(用作缓存一个值),useCallb...
useMemo和useCallback的用法和区别
JackChan
01-11 973
useMemo和useCallback的用法和区别
react useMemo和useEffect区别
01-10
useMemo和useEffect是React中的两个钩子函数，它们有不同的用途和行为。 useMemo用于性能优化，它会在组件渲染过程中缓存计算结果，并在依赖项发生变化时重新计算。它接收两个参数：一个回调函数和一个依赖项数组。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值