React性能优化之Memo、useMemo

文章目录

  • React.memo
    • 两种方式
    • 参数
    • 应用场景
  • 拓展
    • useMemo
      • useMemo(calculateValue, dependencies)
  • 参考资料

React.memo

React 的渲染机制,组件内部的 state 或者 props 一旦发生修改,整个组件树都会被重新渲染一次,即时子组件的参数没有被修改,甚至无状态组件
会造成性能浪费

React.memo 是 React 官方提供的一个高阶组件,用于缓存我们的需要优化的组件

React 中的组件被设计为在状态或 props 值发生变化时重新渲染。但是,这可能会影响应用程序的性能,因为即使更改只是为了影响父组件,附加到父组件的所有其他子组件都将重新呈现。当父组件重新渲染时,其所有子组件也会重新渲染。
React Memo 是一个高阶组件,它包装组件以记忆渲染的输出并避免不必要的渲染。这提高了性能,因为它会记住结果并跳过渲染以重用上次渲染的结果。

已经记忆化的组件,怎么触发更新

  • 即使一个组件被记忆化了,当它自身的状态发生变化时,它仍然会重新渲染。memoization 只与从父组件传递给组件的 props 有关。
  • 即使组件已被记忆化,当其使用的 context 发生变化时,它仍将重新渲染。记忆化只与从父组件传递给组件的 props 有关。
  • useMemo
    • 见拓展(下面)
  • 自定义比较函数(见Memo参数-第二个参数,下面)

两种方式

  • 直接创建(类式创建)
    const myComponent = React.memo((props) => {/* render using props */
    });
    export default myComponent;
    
  • 函数组件
    const myComponent = (props) => {/* render using props */};export const MemoizedComponent = React.memo(myComponent);

仅当 props 值发生变化或组件的状态和上下文发生变化时,memo组件才会重新渲染

参数

React.memo(Component, arePropsEqual?)

  • Component
    组件
  • arePropsRqual
    可选参数,为一个函数
    接受两个参数:

    一个函数,接受两个参数:组件的前一个 props 和新的 props。如果旧的和新的 props 相等,即组件使用新的 props 渲染的输出和表现与旧的 props 完全相同,则它应该返回 true。否则返回 false。通常情况下,你不需要指定此函数。默认情况下,React 将使用 Object.is 比较每个 prop。

function MyComponent(props) {/* 使用 props 渲染 */
}
function shouldMemo(prevProps, nextProps) {/*如果把 nextProps 传入 render 方法的返回结果与将 prevProps 传入 render 方法的返回结果一致则返回 true,否则返回 false*/
}
export default React.memo(MyComponent, shouldMemo);

应用场景

  • 当props没有改变时跳过重新渲染

  • 使用state更新记忆化(memoized)组件

切记,不可以普遍使用该组件,不能都进行缓存,太多缓存,会造成负优化

拓展

useMemo

useMemo(calculateValue, dependencies)

在组件的顶层调用 useMemo 来缓存每次重新渲染都需要计算的结果,它在每次重新渲染的时候能够缓存计算结果

    const cachedValue = useMemo(calculateValue, dependenies)
  • calculateValue
    要缓存计算的函数。之后组件更新,如果dependenies没有发生变化,React将直接返回相同值。否则,将会再次调用calculateValue并返回最新结果,然后进行缓存以便下次进行使用。
  • dependenies
    跟一般钩子的依赖项作用一样

参考资料

官网
掘金

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18045.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为华三思科 交换机基础配置一览

console密码修改 华为 user-interface console 0 authentication-mode password set authentication password cipher XXXXXXXXX华三 line aux 0 authentication-mode password set auth pass simple XXX思科 en configure terminal line console 0 password 123 login忘记…

TypeScript基础学习

目录 一、安装 1、下载国内镜像 2、安装 3、查看安装情况 4、使用例子 二、变量声明 1、规则 2、声明的四种方式 3、注意 4、类型断言 5、类型推断 6、变量作用域 三、基础类型(共11种) 1、Any 类型 2、Null 和 Undefined 3、never 类型…

【备战csp-j】 csp常考题型详解(2)

二.计算机网络。 1. TCP/IP 协议共有( )层协议 。 A.3 B.4 C.5 D.6 答案:B 解析: 2.Ipv4 地址是由( ) 位二进制数码表示的。 A.16 B.32 C.24 D.8 答案:B 解析:IP地址是IP协议提供的一种统一的地址格式。在目前使用的IPv…

Linux - 进程控制(进程替换)

0.引入 创建子进程的目的是什么? 就是为了让子进程帮我执行特定的任务 让子进程执行父进程的一部分代码 如果子进程想执行一个全新的程序代码呢? 那么就要使用 进程的程序替换 为什么要有程序替换? 也就是说子进程想执行一个全新的程序代码&a…

k8s概念-Job和CronJob

回到目录 Job 对于非耐久性任务,比如压缩文件,任务完成后,pod需要结束运行,不需要pod继续保持在系统中,这个时候就要用到Job。 Job负责批量处理短暂的一次性任务 (short lived one-off tasks),即仅执行一…

关于Linux中前端负载均衡之VIP(LVS+Keepalived)自动化部署的一些笔记

写在前面 整理一些 LVS 相关的笔记理解不足小伙伴帮忙指正 傍晚时分,你坐在屋檐下,看着天慢慢地黑下去,心里寂寞而凄凉,感到自己的生命被剥夺了。当时我是个年轻人,但我害怕这样生活下去,衰老下去。在我看来…

HCIP OSPF+BGP综合实验

题目 1、该拓扑为公司网络,其中包括公司总部、公司分部以及公司骨干网,不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名,并且区分大小写。 3、整张拓扑均使用私网地址进行配置。 4、整张网络中,运行OSPF协议或者BGP协议…

Vue的标签<i>

在 Vue 中&#xff0c;<i> 标签用于表示图标&#xff08;Icon&#xff09;。它通常与图标字体或矢量图标库配合使用&#xff0c;用于展示不同的图标。<i> 标签是语义化的&#xff0c;用于表示图标的意义&#xff0c;而不仅仅是装饰性的。 在 Vue 中使用 <i>…

python森林生物量(蓄积量)数据处理到随机森林估算全流程

python森林生物量&#xff08;蓄积量&#xff09;估算全流程 一.哨兵2号获取/处理/提取数据1.1 影像处理与下载采用云概率影像去云采用6S模型对1C级产品进行大气校正geemap下载数据到本地NDVI 1.2 各种参数计算&#xff08;生物物理变量、植被指数等&#xff09;LAI&#xff1a…

网络空间安全及计算机领域常见英语单词及短语——网络安全(一)

目录 网络空间安全常见英语单词没事儿读着玩儿相关知识扫盲 CSDN的小伙伴们&#xff0c;我快回来咯&#xff01;网络空间安全常见英语单词 Cybersecurity 网络安全Network security 网络安全Information security 信息安全Data protection 数据保护Threat analysis 威胁分析Ri…

抖音引流推广的几个方法,抖音全自动引流脚本软件详细使用教学

大家好我是你们的小编一辞脚本&#xff0c;今天给大家分享新的知识&#xff0c;很开心可以在CSDN平台分享知识给大家,很多伙伴看不到代码我先录制一下视频 在给大家做代码&#xff0c;给大家分享一下抖音引流脚本的知识和视频演示 不懂的小伙伴可以认真看一下&#xff0c;我们…

【C++】总结9

文章目录 C从源代码到可执行程序经过什么步骤静态链接和动态链接类的对象存储空间C的内存分区内存池在成员函数中调用delete this会出现什么问题&#xff1f;如果在类的析构函数中调用delete this&#xff0c;会发生什么&#xff1f; C从源代码到可执行程序经过什么步骤 预处理…

印花税的本质和底层逻辑是什么?印花税降低是利好股市吗?

内容由LLM协助生成&#xff1a; 印花税是一种对特定交易或证券交易征收的税费&#xff0c;由政府机构收取。其本质和底层逻辑可以归结为以下几点&#xff1a; 资金来源&#xff1a;印花税是国家财政收入的一部分&#xff0c;用于满足政府的财政需求和公共支出。政府通过征收印花…

java学习路程之篇六、进阶知识、常用API、Arrays工具类、冒泡排序、选择排序、二分查找、正则表达式

文章目录 1、Arrays工具类2、冒泡排序3、选择排序4、二分查找5、正则表达式 1、Arrays工具类 2、冒泡排序 3、选择排序 4、二分查找 5、正则表达式

SQL UNION 操作符

UNION 操作符用于合并两个或多个 SELECT 语句的结果集。 请注意&#xff0c;UNION 内部的每个 SELECT 语句必须拥有相同数量的列。列也必须拥有相似的数据类型。同时&#xff0c;每个 SELECT 语句中的列的顺序必须相同。 SQL UNION 语法 SELECT column_name(s) FROM table1 …

Springboot MongoDB 事务

从版本4开始&#xff0c;MongoDB支持 事务。事务是建立在 会话之上的&#xff0c;因此&#xff0c;需要一个活跃的 ClientSession。 除非你在你的应用程序上下文中指定一个 MongoTransactionManager&#xff0c;否则事务支持是 DISABLED&#xff08;禁用的&#xff09;。你可以…

【Maven】Nexus3上传maven依赖jar

后端依赖 上次说到前端的批量tgz文件上传私服&#xff0c;其实服务端也有类似情况&#xff0c;我们有个私服也需要进行上传到私服&#xff0c;这里做个记录。因为上次有个小细节没注意白白传错了一遍&#xff0c;这里重新记录总结一下。 # 查看一下结构 $ tree -L 2 . |-- re…

【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接

前言&#xff1a;最近项目上需要使用富文本编辑器&#xff0c;觉得tinymce很不错就用了&#xff0c;具体怎么在项目中使用参考 【vue】 vue2 中使用 Tinymce 富文本编辑器 【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面&#xff0c;显示空白bug不能编辑 这两天又遇到了…

Windows下RocketMQ的启动

下载地址&#xff1a;下载 | RocketMQ 解压后 一、修改runbroker.cmd 修改 bin目录下的runbroker.cmd set "JAVA_OPT%JAVA_OPT% -server -Xms2g -Xmx2g" set "JAVA_OPT%JAVA_OPT% -XX:MaxDirectMemorySize15g" set "JAVA_OPT%JAVA_OPT% -cp %CLASSP…

关于事务@Transactional

一.为什么要加事务注解呢 添加事务注解的主要目的是确保在数据库操作过程中的一致性和隔离性。事务是一组操作被视为一个单独的工作单元&#xff0c;并且要么完全成功提交&#xff0c;要么完全回滚&#xff0c;以确保数据的一致性。事务注解提供了在方法或类级别上声明事务边界…