【React】memo()、useCallback()、useMemo()的区别及使用场景

介绍React中三个hooks方法memo useCallback useMemo的作用及使用场景示例

  • 一、React.memo():用来控制函数组件的重新渲染,将组件作为参数,函数的返回值是一个新的组件。
  • 二、React.useCallback():将回调函数及依赖项数组作为参数传入;
  • 三、React.useMemo():将“创建”函数和依赖项数组作为参数传入;
  • 四、结论

一、React.memo():用来控制函数组件的重新渲染,将组件作为参数,函数的返回值是一个新的组件。

import { useState} from "react";
const Child = () => {
  console.log("我是子组件", "渲染了");
  return <div>我是子组件</div>;
};
export const Parent = () => {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return (
    <div>
      <button onClick={increment}>点击次数:{count}</button>
      <Child />
    </div>
  );
};

每点击一次,子组件的useState、props和context都没有改变,但是每点击一次子组件都会重新渲染

解决办法:将memo函数包裹子组件

import { memo } from "react";
const Child = memo(() => {
  console.log("我是子组件", "渲染了");
  return <div>我是子组件</div>;
});

二、React.useCallback():将回调函数及依赖项数组作为参数传入;

  • 它的主要作用是缓存一个回调函数,以确保在组件重新渲染时不会创建新的回调函数,从而减少不必要的性能开销。useCallback 通常与 React.memo 或 shouldComponentUpdate 一起使用,以避免不必要的组件重新渲染。
import { useState,memo } from "react";
const Child =  memo((props: { name: string; onClick: Function }) => {
  const { name, onClick } = props;
  console.log("我是子组件", "渲染了");
  return (
    <>
      <div>我是子组件={name}</div>
      <button onClick={() => onClick("修改父组件传过来的参数")}>改变 name 值</button>
    </>
  );
});
export const Parent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("向子组件传递参数");
  const increment = () => setCount(count + 1);
  const onClick = (name: string) => {
    setName(name);
  };
  return (
    <div>
      <button onClick={increment}>点击次数:{count}</button>
      <Child name={name} onClick={onClick} />
    </div>
  );
};

每点击一次父组件的按钮,子组件都会重新渲染;

原因

  • 点击父组件按钮,父组件中 count 改变,进而导致父组件重新渲染;
  • 父组件重新渲染时,会重新创建 onClick 函数,即传给子组件的 onClick 属性发生了变化,导致子组件渲染;
  • 如果传给子组件的props只有[基本数据类型](https://blog.csdn.net/m0_61049675/article/details/135815841),子组件将不会重新渲染。

解决办法:修改父组件的 onClick 方法,用 useCallback 钩子函数包裹一层。
注意: 如果直接使用useState解构的setName传给子组件, 子组件将不会重复渲染,即使用<Child name={name} setName={setName} />

  const onClick = useCallback((name: string) => {
    setName(name);
  }, []);

三、React.useMemo():将“创建”函数和依赖项数组作为参数传入;

import { useState,memo } from "react";
const Child =  memo((props: { userInfo: { name: string; age: number } }) => {
  const { userInfo} = props;
  console.log("我是子组件", "渲染了");
  return (
    <>
      <div>我是子组件={userInfo}</div>
      <button>改变 name 值</button>
    </>
  );
});
export const Parent = () => {
  const [count, setCount] = useState(0);
  const userInfo = ({ name: "小明", age: 18 });
  const increment = () => setCount(count + 1);
  return (
    <div>
      <button onClick={increment}>点击次数:{count}</button>
      <Child userInfo={userInfo}/>
    </div>
  );
};

每点击一次父组件的按钮,子组件都会重新渲染;

原因

  • 点击父组件按钮,父组件重新渲染;
  • 父组件重新渲染时,会重新生成一个新对象userInfo ,即传给子组件的 userInfo 属性发生了变化,导致子组件渲染;
    解决办法:使用 useMemo 将对象属性包一层。
    注意: 如果直接使用useState解构的userInfo, 子组件将不会重复渲染,即使用const [userInfo, setUserInfo] = useState({ name: "小明", age: 18 });
const userInfo = useMemo(() => ({ name: "小明", age: 18 }), []);

四、结论

  • useMemo返回的是一个变量的值,useCallback返回的是一个函数。
  • useMemo就是作为一个值来使用的,而useCallback则是被绑定的onClick,作为要执行的函数。
  • useCallback和useMemo主要用来做数据缓存,它们的更新依赖于第二个参数是否发生了变化。因此当我们的render重复渲染时,只要我们的useMemo和useCallback的第二个参数值没有发生变化,useMemo和useCallback则不会执行第一个参数里的函数。
  • 当父组件重新发生render的时候,子组件接受父组件的自定义方法,如果我不希望子组件发生变化,那么就需要用useCallback包裹父组件的自定义函数;

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python学习路线 - Python高阶技巧 - 拓展

Python学习路线 - Python高阶技巧 - 拓展 闭包闭包注意事项 装饰器装饰器的一般写法(闭包写法)装饰器的语法糖写法 设计模式单例模式工厂模式 多线程进程、线程并行执行多线程编程threading模块 网络编程Socket客户端和服务端Socket服务端编程实现服务端并结合客户端进行测试 S…

使用Java实现HTTP持久连接:一次与网络的“长聊“

大家都知道&#xff0c;传统的HTTP连接就像是一次性的餐具&#xff0c;每发送一个请求&#xff0c;就得重新建立一个连接&#xff0c;然后快速用完就扔。这对于网络资源来说&#xff0c;简直就是一场"大肆挥霍"的派对。但幸好&#xff0c;我们有HTTP持久连接&#xf…

【字符串】字典树

字典树就是利用一个这样的树状结构&#xff0c;可以记录字符串有没有出现过 放个板子 int nxt[100000][26], cnt; bool st[100000]; // 该结点结尾的字符串是否存在 void insert(string s, int l) // 插入字符串&#xff0c;l是字符串长度 { int p 0;for (int i 0; i < …

BGP邻居故障检测

第一种情况:如果AR2和AR4采用直连建立邻居,则排查步骤如下: 1)在AR2和AR4上使用ping x.x.x.x命令检查AR2和AR4用于建立EBGP邻居关系的直连地址连通性是否正常。如果不能ping通。则需要使用二分法从网络层向下层逐层进行排查,首先检查接口地址及路由的可达性,修改完成后,如…

Architecture Lab:Part C【流水线通用原理/Y86-64的流水线实现/实现IIADDQ指令】

目录 任务描述 知识回顾 流水线通用原理 Y86-64流水线实现&#xff08;PIPE-与PIPE&#xff09; 开始实验 IIADDQ指令的添加 优化 ncopy.ys 仅用第四章知识&#xff0c;CEP11.55 8x1展开&#xff0c;CPE9.35 8x1展开2x1展开消除气泡&#xff0c;CPE8.10 流水线化通过…

中小学信息学奥赛CSP-J认证 CCF非专业级别软件能力认证-入门组初赛模拟题一解析(选择题)

CSP-J入门组初赛模拟题一&#xff08;选择题&#xff09; 1、以下与电子邮件无关的网络协议是 A、SMTP B、POP3 C、MIME D、FTP 答案&#xff1a;D 考点分析&#xff1a;主要考查小朋友们网络相关知识的储备&#xff0c;FTP是文件传输协议和电子邮件无关&#xff0c;所以…

vscode debug无法直接查看eigen变量的问题(解决方法)

主要是给gdb添加一个Eigen相关的printer即可, 网上其他教程都搞太复杂了, 我整理成了一个仓库, 把仓库克隆下来直接运行 ./setup.sh脚本即可配置好 git clone gitgithub.com:fandesfyf/EigenGdb.git cd EigenGdb ./setup.sh 然后在vscode中重新debug即可。 效果 …

2.2-学成在线内容管理之课程分类查询+新增课程

文章目录 内容管理模块4 课程分类查询4.1 需求分析4.2 接口定义4.3 接口开发4.3.1 树型表查询4.3.2 开发Mapper 4.4 接口测试4.4.1 接口层代码完善4.4.2 测试接口 5 新增课程5.1 需求分析5.1.1 业务流程4.1.2 数据模型 5.2 接口定义5.3 接口开发5.3.1 保存课程基本信息5.3.2 保…

深度学习系列55:深度学习加速技术概述

总体有两个方向&#xff1a;模型优化 / 框架优化 1. 模型优化 1.1 量化 最常见的量化方法为线性量化&#xff0c;权重从float32量化为int8&#xff0c;将输入数据映射在[-128,127]的范围内。在 nvdia gpu&#xff0c;x86、arm 和 部分 AI 芯片平台上&#xff0c;均支持 8bit…

嵌入式系统中的电磁兼容和电磁干扰问题如何解决?

嵌入式系统在现代科技领域中发挥着越来越重要的作用&#xff0c;无论是在智能手机、汽车、医疗设备还是工业控制系统中&#xff0c;嵌入式系统都扮演着关键的角色。然而&#xff0c;随着嵌入式系统功能的不断扩展和集成度的增加&#xff0c;电磁兼容性(EMC)和电磁干扰(EMI)问题…

SpringBoot集成axis发布WebService服务

文章目录 1、使用maven-web项目生成server-config.wsdd文件1.1、新建maven-web项目1.1.1、新建项目1.1.2、添加依赖 1.2、编写服务接口和实现类1.2.1、OrderService接口1.2.2、OrderServiceImpl实现类 1.3、配置deploy.wsdd文件deploy.wsdd文件 1.4、配置tomcat1.4.1、配置tomc…

交友系统---让陌生人变成熟悉人的过程。APP小程序H5三端源码交付,支持二开。

随着社交网络的发展和普及&#xff0c;人们之间的社交模式正在发生着深刻的变革。传统的线下交友方式已经逐渐被线上交友取而代之。而同城交友正是这一趋势的产物&#xff0c;它利用移动互联网的便利性&#xff0c;将同城内的人们连接在一起&#xff0c;打破了时空的限制&#…

【node】Node.js的常用内置模块:

文章目录 一、os模块&#xff1a;【1】常用的OS模块方法包括&#xff1a;【2】案例&#xff1a; 二、path模块&#xff1a;【1】常用的path模块方法包括&#xff1a;【2】案例&#xff1a; 三、url模块&#xff1a;【1】常用的url模块方法包括&#xff1a;【2】案例&#xff1a…

LeetCode--代码详解 2.两数相加

2.两数相加 题目 难度&#xff1a;中等 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&#xff0c;并以相同形式返回一个表示和的链表。 你可以假设除了数…

数字孪生:智慧城市的核心技术与发展

一、引言 随着城市化进程的加速&#xff0c;智慧城市的概念和实践逐渐成为全球关注的焦点。智慧城市利用先进的信息通信技术&#xff0c;提升城市治理水平&#xff0c;改善市民的生活质量。而数字孪生作为智慧城市的核心技术&#xff0c;为城市管理、规划、应急响应等方面提供…

【数据分享】1929-2023年全球站点的逐日平均能见度(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;说到常用的降水数据&#xff0c;最详细的降水数据是具体到气象监测站点的降水数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全…

[Angular 基础] - 数据绑定(databinding)

[Angular 基础] - 数据绑定(databinding) 上篇笔记&#xff0c;关于 Angular 的渲染过程及组件的创建&简单学习&#xff1a;[Angular 基础] - Angular 渲染过程 & 组件的创建 Angular 之中的 databinding 是一个相对而言更加复杂&#xff0c;以及我个人觉得相对而言比…

《MySQL》超详细笔记

目录 基本知识 主流数据库 数据库基本概念 MySQL启动 数据库基本命令 数据库 启动数据库 显示数据库 创建数据库 删除数据库 使用数据库 查询当前数据库信息 显示数据库中的表 导入数据库脚本 表 查看表的结构 查看创建某个表的SQL语句 数据库的查询命令 查询…

设计模式学习笔记(一):基本概念;UML

文章目录 参考面向对象的设计原则创建型模式结构型模式行为型模式 UML视图图&#xff08;Diagram&#xff09;模型元素(Model Element)通用机制类之间的关系关联关系复杂&#xff01;&#xff01;聚合关系组合关系 依赖关系泛化关系接口与实现关系 参考 https://github.com/fa…

OpenCV/C++:点线面相关计算(二)

接续&#xff0c;继续更新 OpenCV/C:点线面相关计算_线面相交的点 代码计算-CSDN博客文章浏览阅读1.6k次&#xff0c;点赞2次&#xff0c;收藏12次。OpenCV处理点线面的常用操作_线面相交的点 代码计算https://blog.csdn.net/cd_yourheart/article/details/125626239 目录 1、…
最新文章