UseMemo、UseCallback、React.memo

  前置问题:React中的函数式组件什么时候会重新渲染?
  答:组件中的状态改变(包含Context)、父组件重新渲染导致子组件的重新渲染。

  组件多次重新渲染会导致性能的下降。UseMemo、UseCallback、React.memo都利用缓存机制来提高了组件的性能。
  UseMemo类似于Vue中的计算属性,将组件中计算出的值进行缓存;
  UseCallback将组件中的函数进行缓存;
  React.memo通过监听props的值是否改变来控制子组件是否重新渲染;

UseMemo

官方解释
代码逻辑解释:
  使用useState钩子创建了一个userInfo状态,包含name和gender属性。
  函数formatGender 用来根据用户的gender属性来将其格式化为中文。
  handleClick 方法用来改变userInfo中的name属性。
  gender 是根据函数formatGender 生成的一个值。

不使用UseMemo

  当点击两个按钮,不管是修改name还是修改gender,组件中的状态都发生改变了,所以组件要重新渲染。组件的重新渲染导致formatGender 函数也要重新执行,可以看到函数中的打印语句。
  如果是修改gender导致组件的重新渲染,那么formatGender 函数重新执行,这无可厚非。
  但是如果是修改name导致组件的重新渲染,那么formatGender 函数就不应该重新执行,因为就算它执行了,计算出来的结果与组件重新渲染之前的计算结果还是相同的,这就白白浪费了性能。如果这个计算过程很昂贵,那么性能浪费的更多。

使用UseMemo

  上述的情况可以使用UseMemo这个钩子进行优化,缓存函数上一次的计算结果。只有当特定的状态发生变化时,才会重新进行重新计算,提高了性能。

import { useState, useMemo } from "react";
export const EgOfUseMemo = () => {const [userInfo, setUserInfo] = useState({name: "nobody",gender: "male",});const formatGender = (gender) => {console.log("调用了翻译性别的方法");return gender === "male" ? "男" : "女";};const handleClick = () => {setUserInfo({...userInfo,name: "lvxiaobu",});};const updateSex = () => {setUserInfo({...userInfo,gender: userInfo.gender + 'aaa',});};// 优化前,不使用useMemo的情况下,修改其他属性,也会重新调用formatGender方法,浪费计算资源// 每次点击按钮,都会调用一次formatGender方法// const gender = formatGender(userInfo.gender);// 优化后,修改其他属性,不会重新调用formatGender方法,性能提升// 每次点击按钮,都不会调用formatGender方法const gender = useMemo(() => {return formatGender(userInfo.gender);}, [userInfo.gender]);return (<div>姓名: {userInfo.name} -- 性别: {gender} <br /><button onClick={handleClick}>修改名字</button><button onClick={updateSex}>修改性别</button></div>);
};

UseCallback

官方解释

不使用UseCallback

  为方便调试,请在入口文件中关闭React中的严格模式
代码解释:
  使用useState钩子生成两个状态count和name,并定义两个更新状态的函数updateCount 和updateName 。
  为了监听Fn函数是否是新生成的,使用useRef钩子缓存Fn函数的上一次引用;使用useEffect钩子监听Fn函数的变化,并比较Fn函数两次的引用地址是否相同。
  当组件挂载时,useEffect钩子将Fn函数的引用缓存了起来。
  当通过按钮来改变count或name时,组件中的状态发生改变,进行重新渲染。触发useEffect钩子,打印出预料中的结果(Fn的新引用和旧引用不相等,因为重新渲染的时候生成的是一个新函数,虽然新函数和旧函数的逻辑是一样的,但是在内存中的地址不一样)。

import React from "react";
import { useCallback, useState, useEffect, useRef } from "react";
import Mock from "mockjs";const EgOfUseCallback = () => {const [count, setCount] = useState(0);const [name, setName] = useState("zhangsan");const previousCacheFnRef = useRef(null);const updateCount = () => {setCount(count + 1);};const updateName = () => {setName(Mock.mock("@name"));};const Fn = () => {console.log("count变化了 ", count);};useEffect(() => {if (previousCacheFnRef.current !== null) {console.log("Fn 引用发生变化");console.log("新引用和旧引用是否相等:",previousCacheFnRef.current === cacheFn);}previousCacheFnRef.current = cacheFn;}, [Fn]);return (<div><p>count : {count}</p><button onClick={updateCount}>updateCount</button><p>name : {name}</p><button onClick={updateName}>updateName</button><br /><button onClick={cacheFn}>cacheFn</button></div>);
});
export default EgOfUseCallback;
使用UseCallback

 &emsp使用了useCallback之后,只有组件中特定的状态发生变化时,组件才会在重新渲染的时候生成一个新函数,否则就返回缓存的函数。可以通过useEffect钩子中的打印语句进行验证。

  ......//仅仅需要将函数体用useCallback钩子进行包裹const cacheFn = useCallback(() => {console.log("count变化了 ", count);}, [count]);......

React.memo

官方描述
  一般来说,当父组件中的状态变更之后,父组件中引用的子组件也要进行刷新。
  但是如果子组件中并没有用到父组件中变更的这个状态,那么理论上子组件是不需要进行刷新的。

不使用memo

代码解释:
  在父组件中定义了两个状态,count和name。仅仅传递count的状态给子组件。
  但是无论在父组件中改变哪个状态,都会触发子组件的重新渲染,可以通过子组件中useEffect钩子中的打印语句加以验证。

//App.jsx
import { useState } from "react";
import Mock from "mockjs";
function App() {const [count, setCount] = useState(0);const [name, setName] = useState(Mock.mock("@name"));return (<><span>APP中的name:{name}</span><buttononClick={() => {setName(Mock.mock("@name"));}}>改变name</button><button onClick={() => setCount(count + 1)}>count+1</button><Child count={count}></Child></>);
}
export default App;
//Child.jsx
const Child = ({ count }) => {useEffect(() => {console.log("组件重新渲染了");});console.log("refesh");return (<div><p>App传递过来的count:{count}</p></div>);
};
export default Child;
使用memo

  如果使用memo,就可以让子组件选择性的进行刷新。只有父组件传递给子组件的状态发生改变了,才会重新渲染子组件。
将上述子组件中的代码用memo进行包裹:

//Child.jsx
const Child = React.memo(({ count }) => {useEffect(() => {console.log("组件重新渲染了");});console.log("refesh");return (<div><p>App传递过来的count:{count}</p></div>);
});
Child.displayName = 'Child'
export default Child;

总结

  上述两个钩子和一个API都是围绕状态来展开的。根据依赖的状态是否变化,选择性的进行值、函数或者组件的刷新。
  虽然通过缓存可以提升性能,但是使用时也会造成额外的代价,比如增加内存用量、额外监听特定的状态是否变化了等等,所以在使用之前要确定自己是否真的需要它。

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

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

相关文章

DP(6) | 完全背包 | Java | LeetCode 322, 179, 139 做题总结

322. 零钱兑换 我的错误答案 class Solution {public int coinChange(int[] coins, int amount) {int[][]dp new int [coins.length][amount1];for(int j0; j<amount; j) {if(coins[0] j){dp[0][coins[0]] 1;}}for(int i1; i<coins.length; i) {for(int j0; j<am…

vue3前端开发-小兔鲜项目-图片懒加载的自定义标签

vue3前端开发-小兔鲜项目-图片懒加载的自定义标签&#xff01;很多大型网站&#xff0c;因为首页面渲染的内容太多了&#xff0c;然而有些用户&#xff0c;可能在顶部就发现了自己感兴趣的内容&#xff0c;直接就点击跳转去了其他页面&#xff0c;因此&#xff0c;完全没有必要…

神经网络之多层感知机

目录 一、全连接层&#xff1a;二、单层感知机概念&#xff1a;三、多层感知机概念&#xff1a; 一、全连接层&#xff1a; 在神经网络中&#xff0c;全连接层就是每个神经元都与上一层的所有神经元相连接&#xff0c;即每个神经元都接收上一层所有神经元的输入&#xff0c;并…

【面试题】数据结构:堆排序的排序思想?

堆排序的排序思想&#xff1f; 堆排序是一种高效的排序算法&#xff0c;其基本思想是利用堆这种数据结构来实现排序。堆是一种特殊的完全二叉树&#xff0c;通常用数组来表示。堆排序的基本步骤如下&#xff1a; 1. 构建初始堆&#xff1a; 将待排序的数组转换成一个最大堆&a…

【JavaEE】volatile + final + wait-notify + join + park-unpark 相关原理

本文基于jdk8 本文所讲的一些原理都是在多线程中经常使用的内容。 参考&#xff1a;黑马程序员深入学习Java并发编程&#xff0c;JUC并发编程全套教程_哔哩哔哩_bilibili 目录 volatile原理 Java内存模型(JMM) 可见性&有序性 双重检查锁应用 final原理 设置final变量…

GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

原文链接&#xff1a;GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608565&idx3&snd4e9d447efd82e8dd8192f7573886dab&chksmfa826912cdf5e00414e01626b52bab83a96199a6bf69cbbef7f7fe…

学习日志:java线程

文章目录 前言一、线程和进程线程与进程的关系 二、Java 线程和操作系统的线程JDK 1.2 之前JDK 1.2 及以后用户线程和内核线程 三、创建线程四、线程的生命周期和状态五、线程的上下文切换六、Thread#sleep() 方法和Object#wait() 方法 前言 这里总结线程的一些概念。 一、线程…

​探讨元宇宙和VR虚拟现实之间的区别​

在数字时代&#xff0c;人们对虚拟现实的兴趣与日俱增。在虚拟现实技术的推动下&#xff0c;出现了两个概念&#xff1a;元宇宙和VR虚拟现实。虽然这两个概念都与虚拟现实有关&#xff0c;但它们有着不同的特点和用途。在本文中&#xff0c;我们将探讨元宇宙和VR虚拟现实之间的…

香橙派AIpro-携手华为-为AI赋能

文章目录 香橙派AIpro-携手华为-为AI赋能开箱和功能介绍开箱功能介绍 环境搭建镜像烧录进入系统 测试项目YOLOv5部署YOLOv5识别单张图片实时识别视频使用Ascend测试yolov5 产品评价 香橙派AIpro-携手华为-为AI赋能 今天新入手了一款香橙派AIPro&#xff0c;让我们一起跟着文章…

接口防刷!利用redisson快速实现自定义限流注解

问题&#xff1a; 在日常开发中&#xff0c;一些重要的对外接口&#xff0c;需要加上访问频率限制&#xff0c;以免造成资&#xfffd;&#xfffd;损失。 如登录接口&#xff0c;当用户使用手机号验证码登录时&#xff0c;一般我们会生成6位数的随机验证码&#xff0c;并将验…

【SpringBoot】Controller与Test

第一个SpringBoot程序: RestController public class HelloController{ RequestMapping("/hello") public String hello(){ return "Hello Spring Boot!!!"; } } 单元测试: SpringBootTest public class HelloTest{ Test public void hello(){ Syste…

【iOS】——编译链接和动态链接器

前言 计算机语言分为机器语言&#xff1a;汇编语言&#xff0c;高级语言。 可以将高级语言分为两种&#xff1a;1&#xff0c;编译语言和解释型语言&#xff08;直译式语言&#xff09;。 编译型语言&#xff08;一次性翻译&#xff09; 编译型语言的程序只要经过编译器编译之…

服务的弹性守护者:在Eureka中实现服务降级策略

标题&#xff1a;服务的弹性守护者&#xff1a;在Eureka中实现服务降级策略 在微服务架构中&#xff0c;服务的稳定性和可靠性至关重要。Eureka作为Netflix开源的服务发现框架&#xff0c;不仅提供了服务注册与发现功能&#xff0c;还支持实现服务的降级策略。服务降级是一种在…

uniapp自定义tabBar

uniapp自定义tabBar 1、在登录页中获取该用户所有的权限 getAppFrontMenu().then(res>{if(res.length > 0){// 把所有权限存入缓存中let firstPath res.reverse()[0].path;uni.setStorageSync(qx_data, res);uni.switchTab({url: firstPath,})// 方法二 通过uni.setTabB…

Netty SSL/TLS

Netty中的SSL/TLS详细原理主要涉及到SSL/TLS协议在Netty框架中的实现方式和加密通信过程。SSL/TLS&#xff08;安全套接层/传输层安全协议&#xff09;是一种安全协议&#xff0c;用于在两个通信应用程序之间提供私密性和数据完整性。以下是Netty中SSL/TLS的详细原理&#xff1…

Android 大屏外接显示器锁屏无触摸

一、大海捞针 1、首先查看log,发现异常log log表示主显示器即id 0的显示器有可交互窗口但是没有焦点,副显示器即id 4有焦点但是没有可交互窗口。猜想副显示器把主显示器的焦点抢走了,只需把焦点从副显示器挪回主显示器即可。 通过查看源代码知道上面这段log来自于InputDi…

【时时三省】单元测试 简介

目录 1,单元测试简介 2,单元测试的目的 3,单元测试检查范围 4,单元测试用例设计方法 5,单元测试判断通过标准 6,测试范围 7,测试频率 8,输出成果 经验建议: 山不在高,有仙则名。水不在深,有龙则灵。 ----CSDN 时时三省 1,单元测试简介 单元测试在以V模型…

filebeat,kafka,clickhouse,ClickVisual搭建轻量级日志平台

springboot集成链路追踪 springboot版本 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.6.3</version><relativePath/> <!-- lookup parent from…

【CSS in Depth 2 精译_019】3.2 CSS 的盒模型

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一章 层叠、优先级与继承&#xff08;已完结&#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位&#xff08;已完结&#xff09; 2.1 相对…

【Qt安装与简易串口控制Arduino开发板小灯教程】

【Qt安装与简易串口控制Arduino开发板小灯教程】 1. 前言2. QT环境搭建3. 验证QT_Creator是否安装成功3.1 设计流程3. 2 上位机界面设计 4. 上位机逻辑代码编写4.1 添加串口库、包含串口相关头文件4.2 添加QSerialPort成员4.3 创建串口对象、搜索所有可用串口4.4 在编写“打开串…