useCallback 作用,useMemo ,memo作用 浅显理解

2023-11-12

项目中看到别人代码基本上每个函数都写了useCallback 于是去查了查到底有什么作用

快看睡着了还是没太明白,直接同事请教了一下

大概浅显的理解一点

useCallback:

简单来说就是返回一个函数,只有在依赖项发生变化的时候才会更新(返回一个新的函数)

比如我有两个按钮A,B,都有onclick函数,

都不写useCallback包装onclick的时候,

点击A 按钮,B按钮的onclick也会重新渲染调用,返回一个新的函数

点击B 按钮,A按钮的onclick也会重新渲染调用,返回一个新的函数

如果useCallback包装B按钮的onclick,

点击A 按钮,B按钮的onclick不会被重新渲染调用,返回之前缓存的函数

点击B 按钮,A按钮的onclick还是会重新渲染调用,返回一个新的函数

useCallback缓存的是函数,与useMemo不同的是, useMemo缓存的是值,

useMemo:

useMemouseEffect的执行时间不同,useEffect是在componentDidMount之后执行的,而useMemo是在组件渲染过程中执行的。

useCallback 和 useMemo 参数相同,第一个参数是函数,第二个参数是依赖项的数组。

主要区别是 React.useMemo 将调用 fn 函数并返回其结果,而 React.useCallback 将返回 fn 函数而不调用它。

memo :

作用在子组件上

通常来说,在组件树中 React 组件,

当父组件任何变动的情况下,子组件都会被重新渲染,即使prop所依赖的值没有发生变化,这是react组件的机制。

比如有一个父组件和一个子组件,子组件只是内嵌,不拥有任何父组件依赖,

当父组件调用函数,或者其他操作,导致页面全部重新渲染,子组件自然会重新渲染一次

当使用了React.memo(),该api使得组件仅在它的 props 发生改变的时候才进行重新渲染。但是通过React.memo(),我们可以仅仅让某些组件进行渲染。 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

useCallback 作用,useMemo ,memo作用 浅显理解 的相关文章

  • 使用 React.lazy 时未捕获未定义的错误

    我正在尝试实施基于路由的代码分割 https reactjs org docs code splitting html route based code splitting正如 React 文档中提到的 这是添加延迟实现之前我的应用程序 这
  • React Native:加载图像后应用程序性能不佳

    加载图像似乎没有问题 但是加载完毕后就出现问题了 在我的应用程序中 我在整个游戏中一张一张地加载卡片图像 一旦我加载了 40 张卡片图像 整个应用程序就会变得很慢 它总是发生在第 40 个图像处 当我在第 40 个图像之后继续加载更多卡片图
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 如何让孩子做出反应

    我正在尝试做我自己的Tabs组件 以便我可以在我的应用程序中使用选项卡 然而 我似乎在尝试按类型提取我需要的子组件时遇到问题 import React from react export class Tabs extends React C
  • React - 检查元素在 DOM 中是否可见

    我正在构建一个表单 用户需要回答一系列问题 单选按钮 然后才能进入下一个屏幕 对于字段验证 我使用 yup npm 包 和 redux 作为状态管理 对于一种特定场景 组合 会显示一个新屏幕 div 要求用户进行确认 复选框 然后用户才能继
  • Redux 状态在 mapStateToProps 中未定义

    我目前正在关注this http teropa info blog 2015 09 10 full stack redux tutorial html教程 我遇到了一些障碍mapStateToProps在下面的代码中 import Reac
  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr
  • React无限滚动scrollableTarget动态获取id?

    我在我的项目中使用react infinite scroll component 如何让scrollableTarget动态获取item id 我试过这样scrollableTarget item id 但它不起作用 必须与该 div 具有
  • 如何获取使用 .map 渲染的第一个元素的 ref?

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在
  • 如何修复超出最大调用堆栈大小

    有一个 MERN Firebase 应用程序并收到此错误和一堆 atdeepExtend deepCopy ts 71 RangeError Maximum call stack size exceeded getApps as apps
  • 将 JavaScript 数组转换为具有属性的数组

    我有一个像这样的数组从服务器返回响应 111 1010 111 1010 1010 我想将其转换为 JavaScript JSON 如下所示 branch 111 branch 1010 branch 111 branch 1010 bra
  • JSX 支持哪些 ES6 功能?

    我在用着与 JSX 进行反应 with 反应工具 https www npmjs com package react tools将 JSX 代码编译为 JavaScript JSX 支持哪些 ES6 功能harmony选项已启用 感谢康加克
  • × TypeError:无法读取未定义的属性(读取“map”)

    当我尝试运行此代码时 它给出了此错误 TypeError 无法读取未定义的属性 读取 map 为什么会发生这种情况 我怎样才能让它发挥作用 import React from react import Grid from material
  • React:未捕获的引用错误:未定义需求

    我正在阅读 React 教程 http facebook github io react docs animation html http facebook github io react docs animation html 并且我无法
  • 如何在 React JS 中根据键创建动态表?

    我正在尝试在 React JS 中创建一个动态表组件 该组件当前只有一个静态标头 其中包括最常见的结果键 有些结果还包含更多信息 例如电话号码 学位 如何根据键 值的存在动态地使用附加列扩展表 我应该与state并在存在时使其可见 或者我应
  • 为什么我需要使用 setState 回调来设置依赖于第一个项目的 setState 完成的第二个状态项目的状态?

    在此 componentDidUpdate 方法中 执行 setState 将引号设置为从 fetch 返回的内容后 我必须使用回调再次执行 setState 将 randomQuoteIndex 设置为调用 randomQuoteInde
  • 从 Flask 运行 NPM 构建

    我有一个 React 前端 我想在与我的 python 后端 API 相同的源上提供服务 我正在尝试使用 Flask 来实现此目的 但我遇到了 Flask 找不到我的静态文件的问题 我的前端构建是用生成的npm run build in s
  • Azure Devops 反应脚本测试永远挂起

    我正在尝试在 Azure Dev Ops 中运行我的 React 应用程序的测试 但我不知道如何在测试运行后停止执行 它只是挂在那里 使管道永远处于运行模式 这是一个简单的 create react app 应用程序 有几个测试 以下是我的
  • 更改react-chartjs 2中的工具提示方向

    我已经实现了react chartjs2https www npmjs com package react chartjs 2 https www npmjs com package react chartjs 2在我的反应应用程序中 我已
  • Rails API ActiveStorage:获取公共 URL 以显示来自 AWS S3 存储桶的图像?

    我设置了 Rails 5 2 API 并遵循了有关如何将图像附加到模型对象的文档 这一切都工作正常 我遇到的问题是我想在 JSON 对象中返回附件的公共 URL 以便我可以使用该 URL 作为源 img 并让它显示 谢谢 我的develop

随机推荐

  • 06-1_Qt 5.9 C++开发指南_对话框与多窗体设计_标准对话框

    在一个完整的应用程序设计中 不可避免地会涉及多个窗体 对话框的设计和调用 如何设计和调用这些对话框和窗体是搞清楚一个庞大的应用程序设计的基础 本章将介绍对话框和多窗体设计 调用方式 数据传递等问题 主要包括以下几点 Qt 提供的标准对话框的
  • 给定一个非负整数数组,你最初位于数组的第一个位置... --错误方法纠正

    力扣55题 闹心 太闹心了 上周空闲时间写了一个自动钻取的 结果发现把0搞进去之后各种问题 房子越补漏雨越大 刚才琢磨了一下 真的是方向错了 先来聊聊之前的方案 以此数组为例 int nums 2 1 1 1 3 lastIndex num
  • 最新deepin-wine下微信的安装方法,非常简单 Ubuntu linux可用

    deepin wine阿里云镜像访问异常 可以使用以下脚本安装最新版deepin wine 微信最新版本 deepin com wechat 2 6 8 65deepin0 i386 deb 下载网址 Index of deepin poo
  • 数据结构与算法目录

    前言 数据结构与算法系列先看这里 有助于你更好地获取内容 首先明白一个问题 为什么要研究数据结构 这是因为所有的程序本质上是对数据进行处理 如何高效的处理数据 这依赖于数据本身的结构 如类型 整型 浮点型等 维数 是否为复杂类型 结构体类型
  • 常用Python PDF库对比

    2022 06 07修订 新增第三方库borb 初稿写于2021 01 02 彼时borb才发布1 0版没几个月 两年不到 Github上已近三千赞 PDF Portable Document Format 是一种便携文档格式 便于跨操作系
  • 故障树

    故障树 时间20210105 可以根据这道题目学习故障树 假设系统的可靠性逻辑框图如下所示 故障树的定义 用以表明产品哪些组成部分的故障或外界事件或它们的组合将导致产品发生一种给定故障的逻辑图 故障树是一种逻辑因果关系图 构图的元素是事件和
  • Keil编译错误error: #20: identifier "XXXX" is undefined

    问题 在使用Keil编译工程时 经常遇到提示identifier XXXX 未定义的error信息 Build target canopen mx v1d61 compiling main c Src main c 104 warning
  • SMT贴片制造:发挥的作用和价值]

    SMT贴片制造作为一项重要的电子制造技术 发挥着举足轻重的作用 并提供了巨大的价值 首先 SMT贴片制造为电子产品的制造商提供了高效 准确和可靠的生产方式 相比于传统的手工焊接 SMT贴片制造具有更高的自动化和智能化程度 大幅提高了生产效率
  • day21网络编程(下)

    day21 网络编程 下 课程目标 学会网络编程开发的必备知识点 今日概要 OSI7 层模型 TCP和UDP 粘包 阻塞和非阻塞 IO多路复用 1 OSI 7层模型 OSI的7层模型对于大家来说可能不太好理解 所以我们通过一个案例来讲解 假
  • 安装【sonar】【sonarQube】免费社区版9.9

    文章目录 sonarQube 镜像容器 Linux 安装镜像 出现 Permission denied的异常 安装sonarQube 中文包 重启服务 代码上传到sonarQube扫描 java语言配置 配置 JS TS Php Go Py
  • gitee项目克隆到本地并运行

    首先电脑上要先安装node js和git 配置一下 在gitee上找到需要克隆到本地的项目 点击克隆 下载 在点击HTTPS下面的复制 github上也是类似的方式 把项目地址复制下来 在本机电脑 新建一个文件夹 命名任意 打开新建的文件夹
  • 神经元模型介绍

    一 深度学习的背景 目前 深度学习 Deep Learning 简称DL 在算法领域可谓是大红大紫 深度学习是机器学习领域中的一个新的研究方向 模仿生人类神经网络 学习样本数据的内在规律的一种方法 神经网络属于监督学习的过程 可以处理 回归
  • SQL 语句学习总结:

    1 四范式 范式好处 数据库范式是数据表设计的规范 在范式规范下 数据库里每个表存储的重复数据降到最少 这有助于数据的一致性维护 同时在数据库范式下 表和表之间不再有很强的数据耦合 可以独立的增长 ie 比如汽车引擎的增长和汽车的增长是完全
  • 接口响应时间长,前端返回请求超时解决

    在前端代码设置axios响应时间 1 全局设置 axios defaults timeout 时间 单位为毫秒 或 2 封装的http请求 const service axios create 公共接口 这里注意后面会讲 baseURL p
  • 解决Flutter输入框限制最大输入长度时,从中间输入会自动截取掉后面的内容

    一 问题原由 当限制输入框最大输入长度时 将光标移动到中间输入 当输入的内容长度加上已经输入内容的长度大于限制的输入长度时 Flutter会将光标后面的内容进行截取掉 而当我在原生Android上验证时却是自动截取输入的内容原有的内容不动
  • 输出数组中最大、小值和下标

    详细看代码 package exp 4 public class Array01 public static void main String args int arrs 1 2 2 12 7 5 声明数组并赋值 int max arrs
  • Python实现目录文件扫描功能

    日常程序编写中常常遇到需要获取目录下文件的功能 对该功能做个简单整理 供大家参考 实现遍历目录文件最常用的方法是os listdir 还有一种os walk方法 一 os listdir方法 源码中对该方法的描述 Return a list
  • 史上最详细黑盒测试用例方法总结(等价类、边界值、因果图等)

    黑盒测试用例设计方法 一 等价类 等价类划分法原理 1 把程序的输入域划分成若干部分 然后从每个部分中选取少数代表性数据作为测试用例 2 每一类的代表性数据在测试中的作用等价于这一类中的其他值 如果某一类中的一个例子发现了错误 这一等价类中
  • Flutter FutureBuilder

    FutureBuilder 是 Flutter 中的一个小部件 用于根据 Future 的结果构建用户界面 它接受一个 Future 对象和一个构建函数作为参数 FutureBuilder 将监听 Future 对象的变化 并相应地更新用户
  • useCallback 作用,useMemo ,memo作用 浅显理解

    项目中看到别人代码基本上每个函数都写了useCallback 于是去查了查到底有什么作用 快看睡着了还是没太明白 直接同事请教了一下 大概浅显的理解一点 useCallback 简单来说就是返回一个函数 只有在依赖项发生变化的时候才会更新