React 掌握及对比常用的8个Hooks,优化及使用场景

news/2024/6/16 11:09:39/文章来源:https://blog.csdn.net/sinat_36728518/article/details/137274312

1、useState

在函数组件中,可以使用useState来定义函数组件的状态。使用useState来创建状态。

  • 1.引入
  • 2.接收一个参数作为初始值
  • 3.返回一个数组,第一个值为状态,第二个值为改变状态的函数

2、 useEffect 

useEffect又称副作用hooks。作用:给没有生命周期的组件,添加结束渲染的信号。执行时机:在渲染结束之后执行

  • 什么是副作用?

    • 副作用 ( side effect ): 数据获取,数据订阅,以及手动更改 React 组件中的 DOM 都属于副作用
    • 因为我们渲染出的页面都是静态的,任何在其之后的操作都会对他产生影响,所以称之为副作用
  • 使用:

    • 1.第一个参数,接收一个函数作为参数
    • 2.第二个参数,接收【依赖列表】,只有依赖更新时,才会执行函数
    • 3.返回一个函数,先执行返回函数,再执行参数函数

2.1 不接受第二个参数的情况下

如果不接受第二个参数,那么在第一次渲染完成之后和每次更新渲染页面的时候,都会调用useEffect的回调函数。

2.2 接受第二个参数的情况下

第二个参数传入一个数组,这个数组表示的是更新执行所依赖的列表,只有依赖列表改变时(当数组中的任意一项变化的时候,useEffect会被重新执行 ),才会触发回调函数

  • 传入的为空数组[],那么即告诉useEffect不依赖于stateprops中的任意值,useEffect就只会运行一次,常用场景为页面获取数据的方法可以写入此处进行调用,以获取页面初始数据。
  • 传入一个值构建的数组、或者多个值构建的数组,如[num][num,val],上述代码变更为如下。那么此时只有当数组中的值(任意一项即可)改变时,才会重新触发回调函数。

3、 useLayoutEffect

一般将useLayoutEffect称为有DOM操作的副作用hooks。作用是在DOM更新完成之后执行某个操作。执行时机:在DOM更新之后执行。

useEffect对比

  • 相同点
    • 1.第一个参数,接收一个函数作为参数
    • 2.第二个参数,接收【依赖列表】,只有依赖更新时,才会执行函数
    • 3.返回一个函数,先执行返回函数,再执行参数函数
    • (所以说执行过程的流程是一样的)
  • 不同点
    • 执行时机不同。useLayoutEffectDOM更新之后执行;useEffectrender渲染结束后执行。执行示例代码会发现useLayoutEffect永远比useEffect先执行,这是因为DOM更新之后,渲染才结束或者渲染还会结束

4、 useMemo 

使用useMemo可以传递一个创建函数和依赖项,创建函数会需要返回一个值,只有在依赖项发生改变的时候,才会重新调用此函数,返回一个新的值。简单来说,作用是让组件中的函数跟随状态更新(即优化函数组件中的功能函数)。

  • 使用:
    • 1.接收一个函数作为参数
    • 2.同样接收第二个参数作为依赖列表(可以与useEffect、useLayoutEffect进行对比学习)
    • 3.返回的是一个值。返回值可以是任何,函数、对象等都可以。
    • 使用场景有复杂计算逻辑优化、父子组件传值重新优化等;

5、 useCallback 

useMemo讲完我们来讲一个跟其很相似的叫useCallback,作用也是让某些操作、方法跟随状态的更新而去执行。

useMemo对比。

  • 可以简单这样看作,useMemo(() => Fn,deps)相当于useCallback(Fn,deps) 不同点:
  • useCallback是缓存的是一个函数,对传过来的回调函数优化,返回的是一个函数;useMemo返回值可以是任何,函数,对象等都可以。
  • 复杂计算逻辑的场景不适合使用useCallback来缓存,因为传入的函数内容会不断执行。

相同点:

  • 在使用方法上,useMemouseCallback相同。接收一个函数作为参数,也同样接收第二个参数作为依赖列表

useCallback适用场景

可以对父子组件传参渲染的问题进行优化。简单来说就是,父组件的传入函数不更新,就不会触发子组件的函数重新执行

  • 通常而言,父组件更新了,那么子组件也会更新。但是如果父组件传入子组件的内容不变,那么子组件某些操作(某些操作是指需要跟随传入内容的改变而同步进行的操作)是没必要执行的,这会影响页面性能,所以我们可以对这情况进行优化。

简单总结使用场景判断:

  • 在子组件不需要父组件的值和函数的情况下,只需要使用memo函数包裹子组件即可
  • 如果有函数传递给子组件,使用useCallback
  • 缓存一个组件内的复杂计算逻辑需要返回值时,使用useMemo
  • 如果有值传递给子组件,使用useMemo

6 、useRef 

简单来说useRef就是返回一个子元素索引,此索引在整个生命周期中保持不变。作用也就是:长久保存数据。注意事项,保存的对象发生改变,不通知。属性变更不会重新渲染;

7、useContext

useContext是让子组件之间共享父组件传入的状态的。作用通俗地说是带着子组件去流浪。

  • 需要引入useContextcreateContext两个内容
  • 通过createContext创建一个context句柄
  • Context.Provider来确定数据共享范围
  • 通过value来分发内容
  • 在子组件中,通过useContext(Context句柄)来获取数据

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

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

相关文章

基于TSINGSEE青犀AI视频智能分析技术的山区林区烟火检测方案

随着清明节的临近,山区、林区防火迫在眉睫,TSINGSEE青犀AI智能分析网关V4烟火检测算法利用物联网、人工智能、图像识别技术,有效监测和管理烟火活动,并在火灾发生的同时发出告警,通知护林员与管理人员。 将山区林区的视…

线上研讨会 | 应对汽车毫米波雷达设计中的电磁挑战

智能汽车、新能源汽车最近几年一直是汽车行业关注的热点,随着5G技术越来越普及,汽车智能化发展将越来越迅速。从传统汽车到智能汽车,不是简单功能的增强,而是从单一功能的交通工具变成可移动的办公和娱乐空间,成为物联…

Python(乱学)

字典在转化为其他类型时,会出现是否舍弃value的操作,只有在转化为字符串的时候才不会舍弃value 注释的快捷键是ctrl/ 字符串无法与整数,浮点数,等用加号完成拼接 5不入??? 还有一种格式化的方法…

AcWing 786. 第k个数——算法基础课题解

AcWing 786. 第k个数 题目描述 给定一个长度为 n的整数数列,以及一个整数 k,请用快速选择算法求出数列从小到大排序后的第 k 个数。 输入格式 第一行包含两个整数 n 和 k。 第二行包含 n 个整数(所有整数均在 1∼10^9 范围内&#xff09…

函数参数缺省和内联函数【C++】

文章目录 函数参数缺省函数参数缺省的条件和要求 内联函数内联函数的工作原理内联函数的定义方法内联函数的要求解决方法:直接在.h中定义内联函数的函数体 内联函数再Debug模式下默认是不展开的 函数参数缺省 顾名思义:可以少传一个/多个参数给函数&…

Stream 流和 Lambda 组装复杂父子树形结构

在最近的开发中,遇到了两个类似的需求:都是基于 Stream 的父子树形结构操作,返回 List 集合对象给前端。于是在经过需求分析和探索实践后有了新的认识,现在拿出来和大家作分享交流。 一般来说完成这样的需求大多数人会想到递归&a…

金融汽车科技LLM

汇丰银行 众安保险 1. AIGC重塑保险价值链 小额高频 2.构建智能应用的技术方案演进 增加微服务 长记忆:向量库短记忆:对话历史,思考路径,执行历史 中台架构设计 蔚来汽车在大模型的应用实践 公司介绍 应用架构 应用实践 4.大…

数据结构 - 算法效率|时间复杂度|空间复杂度

目录 1.算法效率 2.时间复杂度 2.1定义 2.2大O渐近表示法 2.3常见时间复杂度计算举例 3.空间复杂度 3.1定义 3.2常见空间复杂度计算举例 1.算法效率 算法的效率常用算法复杂度来衡量,算法复杂度描述了算法在输入数据规模变化时,其运行时间和空间…

rocketmq管理工具rocketmq-console安装

rocketmq-console是一个图形化管理控制台,提供Broker集群状态查看,Topic管理,Producer、Consumer状态展示,消息查询等常用功能,这个功能在安装好RocketMQ后需要额外单独安装、运行。 中文文档地址:https:/…

科技团队治理能力成长路线图

点击👆蓝字 关注我们 本文观点|吴穹 主笔|AI小助手 温馨提示:干货长文,建议收藏阅读喔~ 引言 2024年3月20日,吴穹博士于上海交通大学上海高级金融学院同一众信托行业金融科技管理者进行了《金融…

基于opencv的SVM算法的车牌识别系统设计与实现

基于opencv的SVM算法的车牌识别系统设计与实现 车牌识别技术是智能交通系统中的一项关键技术,它能够自动识别车辆的车牌号码。本文将详细介绍如何使用Python编程语言结合OpenCV库和SVM算法来实现车牌识别系统。 系统架构 车牌识别系统主要包括以下几个模块&…

前端学习<四>JavaScript基础——01-编程语言和JavaScript简介

计算机语言 概念 计算机语言:人与计算机之间通信的语言。它是人与计算机之间传递信息的媒介,它通过特定的语法规则和语义约定,将人类可理解的指令转化为计算机可以执行的机器指令。 计算机程序:就是计算机所执行的一系列的指令…

docker 部署项目

编写Dockerfile #FROM:基于java:8镜像构建 FROM openjdk:8 #EXPOSE:监听8080端口,暴露容器的8080端口,该端口余项目端口需要一致 EXPOSE 8080 #ARG:引用plugin中配置的 JAR_FILE 文件 ARG JAR_FILE #ADD:将…

OpenHarmony实战:轻量级系统之安全子系统移植

安全子系统提供网络设备连接、认证鉴权等功能,依赖mbedtls实现硬件随机数以及联网功能。 由于每个厂商芯片硬件与实现硬件随机数的方式不同,需要适配硬件随机数接口。 移植指导 OpenHarmony提供了mbedtls的开源三方库,路径为“//third_par…

人人都离不开的算法:AI 时代的生存指南

文章目录 一、算法在生活中的“无处不在”二、算法在工作学习中的“智慧助力”三、算法在社会发展中的“驱动力量”四、算法带来的“双刃剑”效应五、应对算法挑战的策略《人人都离不开的算法——图解算法应用》编辑推荐1、通俗易懂2、技术科普3、贴近时代、贴近生活4、启发思考…

[C++]使用OpenCV去除面积较小的连通域

这是后期补充的部分&#xff0c;和前期的代码不太一样 效果图 源代码 //测试 void CCutImageVS2013Dlg::OnBnClickedTestButton1() {vector<vector<Point> > contours; //轮廓数组vector<Point2d> centers; //轮廓质心坐标 vector<vector<Point&…

Android的图片加载框架

Android的图片加载框架 为什么要使用图片加载框架&#xff1f;图片加载框架1. Universal Image Loader [https://github.com/nostra13/Android-Universal-Image-Loader](https://github.com/nostra13/Android-Universal-Image-Loader)2. Glide [https://muyangmin.github.io/gl…

文献速递:深度学习胰腺癌诊断--深度学习算法用于从疾病轨迹预测胰腺癌风险

文献速递&#xff1a;深度学习胰腺癌诊断--深度学习算法用于从疾病轨迹预测胰腺癌风险 麦田医学 美好事物中转站 2024-04-02 14:36 Title 题目 A deep learning algorithm to predict risk of pancreatic cancer from disease trajectories 深度学习算法用于从疾病轨迹预测…

vue中使用图片url直接下载图片

vue中使用图片url直接下载图片 // 下载图片downloadByBlob(url, name) {let image new Image()image.setAttribute(crossOrigin, anonymous)image.src urlimage.onload () > {let canvas document.createElement(canvas)canvas.width image.widthcanvas.height image…

pymc,一个灵活的的 Python 概率编程库!

目录 前言 安装与配置 概率模型 贝叶斯推断 概率分布 蒙特卡罗采样 贝叶斯网络 实例分析 PyMC库的应用场景 1. 概率建模 2. 时间序列分析 3. 模式识别 总结 前言 大家好&#xff0c;今天为大家分享一个超强的 Python 库 - pymc Github地址&#xff1a;https://gith…