React Hook 总结(React 萌新升级打怪中...)

1 useCallback

useMemo 和 useCallback 接收的参数都是一样,都是在其依赖项发生变化后才执行,都是返回缓存的值,区别在于 useMemo 返回的是函数运行的结果,useCallback 返回的是函数。

当需要使用 useCallback 的情况通常包括以下几种情形:

(1)将回调函数作为 prop 传递给子组件:在这种情况下,使用 useCallback 可以确保子组件在父组件重新渲染时不会不必要地重新渲染。

import React, { useCallback } from 'react';const ParentComponent = () => {const handleClick = useCallback(() => {console.log('Button clicked!');}, []);return <ChildComponent onClick={handleClick} />;
};const ChildComponent = ({ onClick }) => {return <button onClick={onClick}>Click me</button>;
};

(2)优化依赖项变化引起的重新渲染:在 useEffect 中使用 useCallback 可以避免不必要的重新执行。

import React, { useState, useEffect, useCallback } from 'react';const ExampleComponent = () => {const [count, setCount] = useState(0);const handleIncrement = useCallback(() => {setCount(count + 1);}, [count]);useEffect(() => {console.log('Count changed:', count);}, [handleIncrement]);return (<div><p>Count: {count}</p><button onClick={handleIncrement}>Increment</button></div>);
};

(3)避免不必要的函数创建:在需要动态生成函数的场景下,使用 useCallback 缓存函数。

import React, { useCallback } from 'react';const ExampleComponent = () => {const generateRandomNumber = useCallback(() => {return Math.floor(Math.random() * 100);}, []);return (<div><p>Random number: {generateRandomNumber()}</p></div>);
};

注意: useCallBack不要每个函数都包一下,否则就会变成反向优化,useCallBack本身就是需要一定性能的
useCallBack并不能阻止函数重新创建,它只能通过依赖决定返回新的函数还是旧的函数,从而在依赖不变的情况下保证函数地址不变。useCallBack你真的知道怎么用吗。

2 useMemo

useMemo 可以在函数组件 render 上下文中同步执行一个函数逻辑,这个函数的返回值可以作为一个新的状态缓存起来。

场景一:在一些场景下,需要在函数组件中进行大量的逻辑计算,那么我们不期望每一次函数组件渲染都执行这些复杂的计算逻辑,所以就需要在 useMemo 的回调函数中执行这些逻辑,然后把得到的产物(计算结果)缓存起来就可以了。
场景二:React 在整个更新流程中,diff 起到了决定性的作用,比如 Context 中的 provider 通过 diff value 来判断是否更新

缓存计算结果:

function Scope(){const style = useMemo(()=>{let computedStyle = {}// 经过大量的计算return computedStyle},[])return <div style={style} ></div>
}

缓存组件,减少子组件 render 次数:

function Scope ({ children }){const renderChild = useMemo(()=>{ children()  },[ children ])return <div>{ renderChild } </div>
}

参考

「React 进阶」 React 全部 Hooks 使用大全 (包含 React v18 版本 )

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

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

相关文章

Kylin系列入门

Kylin是中国最流行的开源大数据平台之一&#xff0c;主要用于解决大数据存储、处理和分析问题。Kylin的目标是将大数据分析变得更简单、更快速和更高效。下面是Kylin系列的入门指南&#xff0c;带有一些示例。 什么是 Kylin&#xff1f; Kylin是Apache Kylin项目下的一个开源…

服务器基础1

服务器基础复习01 1.环境部署 系统&#xff1a;华为欧拉系统 网络简单配置nmtui 因为华为欧拉系统密码需要复杂度 所以我们可以进入后更改密码 echo 123 | passwd --stdin root也可以 echo "root:123" | chpasswd2.关闭防火墙&#xff0c;禁用SElinux 首先先关…

Socket 简介与 Java Socket 编程示例

Socket&#xff08;套接字&#xff09;是网络通信中的一个关键概念&#xff0c;它是对网络中不同主机上的应用进程之间进行双向通信的端点的抽象。 一、定义与概念 基本概念&#xff1a;Socket可以被视为网络环境中进程间通信的API&#xff08;应用程序编程接口&#xff09;&…

彻底理解Linux的DISPLAY变量的作用

背景 最近遇到个两年前遇到的问题&#xff0c;使用virt-manager提示(virt-manager:873): Gtk-WARNING **: 14:53:28.147: cannot open display: :1&#xff0c;当时专门运维的同事帮忙临时调了下DISPLAY变量&#xff0c;好像是将:1改成了SSH用户本地IP:10.0&#xff0c;当时的…

每日一题——第十四题

题目&#xff1a;输入一行数字&#xff0c;将其按升序输出&#xff0c;且奇数在前&#xff0c;偶数在后 #include<stdio.h>void bubbleSort(int* arr, int n); int main(){int n, i, input_nums;printf("请输入数字个数&#xff1a; ");scanf("%d",…

纠正和防止机器学习中的不公平现象

「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础人工智能Python基础人工智能基础核心知识人工智能BI核心知识人工智能CV核心知识AI 进阶&#xff1a;企业项目实战 预处理、处理中、后处理方法和非定量方法 机器学习中的公平性是一个复杂的问题。更糟糕的是&#xff0c;负…

加密传输及相关安全验证:

1.1. 加密&#xff1a; 1.1.1. 对称加密&#xff1a; 特点&#xff1a;加解密用一个密钥&#xff0c;加解密效率高&#xff0c;速度快&#xff0c;有密钥交互的问题问题&#xff1a;双方如何交互对称密钥的问题&#xff0c;用非对称密钥的公钥加密对称密钥的混合加密方式常用…

[数据分析]脑图像处理工具

###############ATTENTION&#xff01;############### 非常需要注意软件适配的操作系统&#xff01;有些仅适用于Linux&#xff0c;可以点进各自软件手册查看详情。 需要自行查看支持的影像模态。 代码库和软件我没有加以区分。 不是专门预处理的博客&#xff01;&#xf…

C语言 底层逻辑详细阐述指针(一)万字讲解 #指针是什么? #指针和指针类型 #指针的解引用 #野指针 #指针的运算 #指针和数组 #二级指针 #指针数组

文章目录 前言 序1&#xff1a;什么是内存&#xff1f; 序2&#xff1a;地址是怎么产生的&#xff1f; 一、指针是什么 1、指针变量的创建及其意义&#xff1a; 2、指针变量的大小 二、指针的解引用 三、指针类型存在的意义 四、野指针 1、什么是野指针 2、野指针的成因 a、指…

深入理解TCP/IP协议:三次握手与四次挥手

以下是一篇关于TCP/IP握手和挥手过程的CSDN博客文章草稿&#xff1a; 摘要 TCP&#xff08;传输控制协议&#xff09;是互联网上使用最广泛的协议之一&#xff0c;它负责在网络中的两个主机之间提供可靠的、有序的和错误检测功能的数据传输。本文将详细介绍TCP的三次握手过程和…

《基于 Kafka + Quartz 实现时限质控方案》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

Activiti7+ SpringBoot+SpringMVC 开发

添加 Controller 类 代码如下&#xff1a; RestController public class MyController {Autowiredprivate ProcessRuntime processRuntime;Autowiredprivate TaskRuntime taskRuntime;Autowiredprivate SecurityUtil securityUtil; }实现任务完成 RequestMapping("test…

学习分布式事务遇到的小bug

一、介绍Seata 在处理分布式事务时我用到是Seata&#xff0c;Seata的事务管理中有三个重要的角色&#xff1a; TC (Transaction Coordinator) - 事务协调者&#xff1a;维护全局和分支事务的状态&#xff0c;协调全局事务提交或回滚。 TM (Transaction Manager) - 事务管理器…

从零开始学习cartographer源码 | 02.cartographer_ros—node_main.cc

从零开始学习cartographer源码 | 02.cartographer_ros—node_main.cc cartographer_ros程序的入口 main()函数程序的主函数Run()函数 特别&#xff08;防杠&#xff09;声明&#xff1a;《从零开始学习cartographer源码》系列文章仅仅是本人学习cartographer的学习笔记&#xf…

PHP pwn 学习 (2)

文章目录 A. 逆向分析A.1 基本数据获取A.2 函数逆向zif_addHackerzif_removeHackerzif_displayHackerzif_editHacker A.3 PHP 内存分配 A.4 漏洞挖掘B. 漏洞利用B.1 PHP调试B.2 exp 上一篇blog中&#xff0c;我们学习了一些PHP extension for C的基本内容&#xff0c;下面结合一…

Open3D Ransac算法拟合点云球面

目录 一、概述 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2拟合后点云 前期试读&#xff0c;后续会将博客加入该专栏&#xff0c;欢迎订阅 Open3D点云算法与点云深度学习案例汇总&#xff08;长期更新&#xff09;-CSDN博客 一、概述 RANSAC&a…

【Chatgpt大语言模型医学领域中如何应用】

随着人工智能技术 AI 的不断发展和应用&#xff0c;ChatGPT 作为一种强大的自然语言处理技术&#xff0c;无论是 自然语言处理、对话系统、机器翻译、内容生成、图像生成&#xff0c;还是语音识别、计算机视觉等方面&#xff0c;ChatGPT 都有着广泛的应用前景。特别在临床医学领…

python 语法学习 day6

一.编程题错题反思 1.计算分段函数&#xff1a; x float(input()) if x 0: res 0 else: res 1 / (2 * x) print("g({:.3f}) {:.3f}".format(x, res)) #其中对于f&#xff0c;e和%格式&…

pycharm如何debug for循环里面的错误值

一般debug时&#xff0c;在for循环里面的话&#xff0c;需要自己一步一步点。如果循环几百次那种就比较麻烦。此时可以采用try except的方式来解决 例子如下 #ptyhon debug for循环的代码 num[1,2,3,s,4] ans0 for i in num:try:ansiexcept:print(错误) print(ans) 结果如下&a…

HTML+echarts.js实现的炫酷金色风格可视化组件

模板下载地址&#xff1a; 炫酷金色风格可视化组件 (bootstrapmb.com)https://www.bootstrapmb.com/item/14888 一款炫酷金色风格可视化组件&#xff0c;统计图表使用Echarts.js&#xff0c;整体风格采用金黄色看起来很大气&#xff0c;设计是通用型的&#xff0c;可以用作任…