【React】useCallback 使用的说明

文章目录

    • useCallback的优缺点
      • 优点
      • 缺点
      • JavaScript 的内联优化
    • 使用场景

用了两年多的react,今天抽空写点小内容

useCallback的优缺点

缓存了每次渲染时候 inline callback的实例

优点

关键点:利用memoize减少无效的re-render,通常配合shouldComponentUpdate 或者 React.memo 起到减少不必要渲染的目的

  1. 性能优化:useCallback可以帮助避免每次渲染的时候创建新的函数实例。这对于将函数作为props传递给子组件的时候特别有用,因为子组件可以使用React.memo 来进行浅比较,从而避免不必要的重新渲染
  2. 依赖性控制: useCallback 接受一个依赖数组作为第二个参数,使得你可以明确指定哪些变量的变化应该导致函数重新创建。这有助于精确控制依赖,避免不必要的重新计算。

缺点

  1. 过度使用可能导致性能问题:useCallback可能会阻止某些优化(如内联)
  2. 增加复杂性:在简单组件中,使用useCallback 可能会显得过于繁琐,因此优先考虑组件的复杂性和性能需求,权衡是否使用useCallback
  3. 可能引入bug:如果依赖数组设置不当,导致函数被错误缓存

JavaScript 的内联优化

  1. 内联优化:内联指的是 将函数调用代码直接插入到调用处,而不是通过函数调用方式执行,这样可以减少函数调用的开销,提高性能。当使用useCallback 包裹一个函数时候,React 可能无法在一些情况进行内联,因为useCallback返回的是同一个函数实例,而不是新的函数
const memoizedCallback = useCallback(() => {// function body
}, [/* dependencies */]);// 内联优化可能受到影响
<SomeComponent onClick={memoizedCallback} />
  1. 对象缓存:内联也与对象的创建和缓存有关。如果一个函数内部创建了对象,并且该函数被useCallback缓存,那么对象可能被缓存在在闭包中,导致无法及时被垃圾回收。这可能会在长时间运行的应用中引起内存泄露问题
const memoizedCallback = useCallback(() => {const obj = { key: 'value' };// 使用 obj
}, [/* dependencies */]);// obj 可能无法及时被垃圾回收

为了确保在不再需要时能够及时释放对象并触发垃圾回收,你可以采取以下步骤:

import { useCallback, useEffect, useRef } from 'react';const MyComponent = () => {const memoizedObject = useRef(null);memoizedObject.current = useCallback(() => {const obj = { key: 'value' };// 使用 objreturn obj;}, [/* dependencies */]);// ...// 如果 memoizedObject 不再被使用,设置为 null 或者清除引用useEffect(() => {return () => {// 清除对 memoizedObject 的引用// 这样,在组件卸载或 memoizedObject 不再使用时,可以及时触发垃圾回收memoizedObject.current = null;};}, []);// ...
};

在这个例子中,我们使用 useEffect 来监听组件的生命周期,并在组件即将卸载时执行清理操作。通过将 memoizedObject.current 设置为 null 或清除引用,我们告诉垃圾回收器这个对象不再被需要。这有助于确保在组件卸载或不再需要时能够及时释放对象并触发垃圾回收。

请注意,这里使用了 memoizedObject.current,因为在 React Hooks 中,我们经常使用 useRef 来保存可变的值,并确保在组件重新渲染时保持其稳定性。如果你使用 useRef 来保存 memoizedObject,你可以在 useEffect 中设置 memoizedObject.current 为 null 或清除引用。

使用场景

  1. 函数被 useEffect 内部所引用了,但为了避免频繁的useEffect的频繁调用,可以选择包一下;
  2. 需要保存一个函数闭包结果,如配合 debounce、throttle使用;
  3. useCallback包裹的函数,但某个依赖项变化时,引用这个函数的所有 useEffect 都得重新执行一下;

最后分享一个外链:Day383:说下 React 的 useEffect、useCallback、useMemo

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

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

相关文章

ElasticSearch之cat trained model API

命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/ml/trained_models?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; id heap_size …

如何在OpenWRT软路由系统部署uhttpd搭建web服务器实现远程访问——“cpolar内网穿透”

文章目录 前言1. 检查uhttpd安装2. 部署web站点3. 安装cpolar内网穿透4. 配置远程访问地址5. 配置固定远程地址 前言 uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器&#xff0c;目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器&#xff0c;并且和…

docker-compose的介绍与使用

一、docker-compose 常用命令和指令 1. 概要 默认的模板文件是 docker-compose.yml&#xff0c;其中定义的每个服务可以通过 image 指令指定镜像或 build 指令&#xff08;需要 Dockerfile&#xff09;来自动构建。 注意如果使用 build 指令&#xff0c;在 Dockerfile 中设置…

RHEL网络服务器

目录 1.时间同步的重要性 2.配置时间服务器 &#xff08;1&#xff09;指定所使用的上层时间服务器。 (2&#xff09;指定允许访问的客户端 (3&#xff09;把local stratum 前的注释符#去掉。 3.配置chrony客户端 &#xff08;1&#xff09;修改pool那行,指定要从哪台时间…

Python常见面试知识总结(一):迭代器、拷贝、线程及底层结构

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天来总结一下Python和C语言中常见的面试知识&#xff0c;欢迎大家一起前来探讨学习~ 【一】Python中迭代器的概念&#xff1f; 可迭代对象是迭代器、生成器和装饰器的基础。简单来说&#xff0c;可以使用for来循环遍历…

[古剑山2023] pwn

最近这个打stdout的题真多。这个比赛没打。拿到附件作了一天。 choice 32位&#xff0c;libc-2.23-i386&#xff0c;nbytes初始值为0x14,读入0x804A04C 0x14字节后会覆盖到nbytes 1个字节。当再次向v1读入nbytes字节时会造成溢出。 先写0x14p8(0xff)覆盖到nbytes然后溢出写传…

初次参加软考就想报高级,哪个相对容易考?

如果你想第一次参加软考时就报考高级科目&#xff0c;但是却不知道该报考高级中的哪个科目好、 ​ ​那么今天的这篇文章你一定不要错过&#xff01;首先&#xff0c;我们一起来了解一下&#xff0c;软考高级中的5个科目。 ​ ​软考高级科目 ​ 信息系统项目管理师 ​ …

记录一次postgresql临时表丢失问题

项目相关技术栈 springboot hikari连接池pgbouncerpostgresql数据库 背景 为了优化一个任务执行的速度&#xff0c;我将任务的sql中部分语句抽出生成临时表&#xff08;create temp table tempqw as xxxxxxxxx&#xff09;&#xff0c;再和其他表关联&#xff0c;提高查询速…

三翼鸟2023辉煌收官, 定盘2024高质量棋局

最近在不同平台上接连看到这样的热搜话题&#xff1a;用时间胶囊记录2023的自己、2023年度问答、2023十大网络流行语公布… 显然&#xff0c; 2023年进入最后一个月&#xff0c;时间匆匆&#xff0c;这也意味着又到了总结过去和规划未来的时候。拿到结果、取得成绩当然是对202…

算法通关村第十五关 | 白银 | 海量数据场景下的热门算法题

1.从 40 个亿中产生一个不存在的整数 可以采用位图存储数据&#xff0c;申请一个 bit 类型的数组 bitArr &#xff0c;每个位置只表示 0 或者 1 状态&#xff0c;可以将占用内存缩小为使用哈希表的 1/32 。 遍历给定的 40 亿个数&#xff0c;遇到数时就将 bitArr 相应位置设置…

短视频引流获客系统:引领未来营销的新潮流

在这个信息爆炸的时代&#xff0c;短视频已经成为了人们获取信息的主要渠道之一。而随着短视频的火爆&#xff0c;引流获客系统也逐渐成为了营销领域的新宠。本文将详细介绍短视频引流获客系统的开发流程以及涉及到的技术&#xff0c;让我们一起来看看这个引领未来营销的新潮流…

华清远见作业第二十四天

使用消息队列完成两个进程之间相互通信 代码 #include<stdio.h> #include<string.h> #include<stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <sys/ipc.h> #include <sys/msg.h> #in…

k8s一键部署uniswap

1、拉取uniswap源码 github地址 2、编写Dockerfile并打镜像 # Set the base image FROM node:18.10.0# WORKDIR /usr/src/app/ WORKDIR /home/gateway# Copy files COPY ./ /home/gateway/# Dockerfile author / maintainer LABEL maintainer"Michael Feng <mikehummi…

Java最全面试题专题---2、Java集合容器(2)

Map接口 说一下 HashMap 的实现原理&#xff1f; HashMap概述&#xff1a; HashMap是基于哈希表的Map接口的非同步实现。此实现提供所有可选的映射操作&#xff0c;并允许使用null值和null键。此类不保证映射的顺序&#xff0c;特别是它不保证该顺序恒久不变。 HashMap的数据…

C语言-枚举

常量符号化 用符号而不是具体的数字来表示程序中的数字 枚举 用枚举而不是定义独立的const int变量 枚举是一种用户定义的数据类型&#xff0c;他用关键词enum以如下语法来声明&#xff1a; enum枚举类型名字{名字0&#xff0c;…&#xff0c;名字n}&#xff1b; 枚举类型名…

外包干了3年,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了差不多3年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能…

6_CSS布局之浮动的应用

day06_CSS布局之浮动的应用 本课目标&#xff08;Objective&#xff09; 理解什么是浮动掌握浮动的三种机制掌握浮动的案例应用 1 CSS 布局的三种机制 CSS 提供了 3 种机制来设置盒子的摆放位置&#xff0c;分别是普通流&#xff08;标准流&#xff09;、浮动和定位。 普通流…

HarmonyOS开发:回调实现网络的拦截

前言 基于http封装的一个网络库&#xff0c;里面有一个知识点&#xff0c;在初始化的时候&#xff0c;可以设置请求头拦截和请求错误后的信息的拦截&#xff0c;具体案例如下&#xff1a; et.getInstance().init({netErrorInterceptor: new MyNetErrorInterceptor(), //设置全…

web网络安全

web安全 一&#xff0c;xss 跨站脚本攻击(全称Cross Site Scripting,为和CSS&#xff08;层叠样式表&#xff09;区分&#xff0c;简称为XSS)是指恶意攻击者在Web页面中插入恶意javascript代码&#xff08;也可能包含html代码&#xff09;&#xff0c;当用户浏览网页之时&…

关于北京医学sci论文翻译

在医学领域&#xff0c;翻译论文是一项非常重要的工作。医学论文的翻译需要准确、专业、严谨&#xff0c;同时也需要考虑到医学领域的特殊性和复杂性。那么&#xff0c;如何翻译医学论文呢&#xff1f;北京医学SCI论文翻译哪家好呢&#xff1f; 首先&#xff0c;需要具备专业的…