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

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.mzph.cn/news/789435.shtml

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

相关文章

JVM 记录

记录 工具 https://gceasy.io 资料 尚硅谷宋红康JVM全套教程(详解java虚拟机) https://www.bilibili.com/video/BV1PJ411n7xZ?p361 全套课程分为《内存与垃圾回收篇》《字节码与类的加载篇》《性能监控与调优篇》三个篇章。 上篇《内存与垃圾回收篇…

JavaScript 对象管家 Proxy

JavaScript 在 ES6 中,引入了一个新的对象类型 Proxy,它可以用来代理另一个对象,并可以在代理过程中拦截、覆盖和定制对象的操作。Proxy 对象封装另一个对象并充当中间人,其提供了一个捕捉器函数,可以在代理对象上拦截…

基于Zabbix 5.0 实现windows服务器上应用程序和主机端口的状态监控

基于Zabbix 5.0 实现windows服务器上应用程序和主机端口的状态监控 背景 用python开发的应用程序在服务器上运行,有时候会出现程序自动退出却收不到告警的情况 环境 zabbix服务器:Centos7 64位 Windows服务器: Windows 10 64位 软件 zabbix_server:zabbix5.0 zabbix_…

680.验证回文串II-力扣

680.验证回文串II-力扣 给你一个字符串 s,最多可以从中删除一个字符。 请你判断 s 是否能成为回文字符串:如果能,返回 true ;否则,返回 false。 示例1: 输入:s “aba” 输出:true示…

如何制作一个微信小程序商城?

在这个数字化飞速发展的时代,微信小程序商城以其独特的便捷性和高效的用户连接能力,成为了电商领域的一颗新星。对于那些渴望在微信平台上开展业务的商家和企业来说,微信小程序商城不仅是一种新的尝试,更是一个充满无限可能的商机…

2024年文化传播、交流与考古学国际会议 (CCEA 2024)

2024年文化传播、交流与考古学国际会议 (CCEA 2024) 2024 International Conference on Cultural Communication, Exchange, and Archaeology 【会议简介】 2024年文化传播、交流与考古学国际会议即将在千年古都西安盛大召开。本次会议将汇聚全球文化、传播、考古等领域的专家…

ORCLE函数学习方法

1.字符串小代码转化为字符串值 如 (10,20)==》 (现金(电汇),银行承兑汇票,现金(电汇)) CREATE OR REPLACE FUNCTION FROM_ARRAYSTR_TO_STR(P1 in varchar2,P2 in varchar2) return varchar2 is VLA varchar2(2048):=;--最后函数返回的值 TEMP varchar2(20); --截取…

优化Zabbix系统实现性能提升(详细操作指引)

一、数据库优化 1. 将 MySQL 数据库升级到最新版本 操作步骤: 查看当前版本:mysql -V 升级到最新版本:yum install mysql-server -y 2. 调整 MySQL 数据库参数 以下是一些重要的参数及其建议值: innodb_buffer_pool_size:用于存储 InnoDB 引擎的数据缓存,建议设置为系…

每日一题(leetcode2952):添加硬币最小数量 初识贪心算法

这道题如果整体去思考,情况会比较复杂。因此我们考虑使用贪心算法。 1 我们可以假定一个X,认为[1,X-1]区间的金额都可以取到,不断去扩张X直到大于target。(这里为什么要用[1,X-1]而不是[1,X],总的来说是方便,潜在思想…

浏览器工作原理与实践--async/await:使用同步的方式去写异步代码

在上篇文章中,我们介绍了怎么使用Promise来实现回调操作,使用Promise能很好地解决回调地狱的问题,但是这种方式充满了Promise的then()方法,如果处理流程比较复杂的话,那么整段代码将充斥着then,语义化不明显…

C#-非托管代码

非托管代码是指不受.NET运行时(CLR)的管理和控制,而是直接由操作系统或其他本机执行环境(如C/C编译的代码)所执行的代码。以下是一些常见的非托管代码的例子: C/C代码:通过使用C或C等编程语言编…

7.阻塞模式与非阻塞模式

1.阻塞模式 一个线程来处理多个连接显得力不从心 accept等待连接 是一个阻塞方法 read读取SocketChannel中的数据 是一个阻塞方法 /*** 服务端* param args* throws IOException*/public static void main(String[] args) throws IOException {//建立一个缓冲区ByteBuffer b…

使用Bitmaps位图实现Redis签到

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 Redis提供了Bitmaps这个“数据类型”可以实现对位的操作: (1) Bitmaps…

基于Weibull、Beta、Normal分布的风、光、负荷场景生成及K-means场景削减方法

目录 一、主要内容: 二、代码运行效果: 三、Weibull分布与风机风速: 四、Beta分布与光伏辐照度: 五、Normal分布与电负荷: 六、K-means聚类算法: 七、完整代码数据下载: 一、主要内容&am…

【数论】莫比乌斯反演(欧拉反演)进阶-杜教筛

文章目录 前言 回忆 题集12 杜教筛例题 前言 这里需要对莫反有一些基础。 不会的可以点这里 回忆 f ( n ) ∑ d ∣ n g ( d ) → g ( n ) ∑ d ∣ n f ( d ) μ ( n d ) f(n)\sum_{d|n}g(d)\rightarrow g(n)\sum_{d|n}f(d)\mu(\frac{n}{d}) f(n)∑d∣n​g(d)→g(n)∑d∣n​…

Windows如何优雅的运行ROS2/linux

Windows如何优雅的运行ROS2/linux 前言 在ROS/ROS2开发过程中,大家普遍使用到的分布式开发方法都是基于虚拟机/双系统进行,本质上是希望基于Ubuntu良好的生态环境进行,但是两种方式各有各自的好处,也有各自的弊端,例…

docker 部署 nali 开源 IP 地理信息归属查询软件

前言 早前用到一个小巧开源的 IP 归属地查询软件,官方提供了 Dockerfile,使用了一段时间觉得还不错,非常简单便捷。 部署 docker 启动 由于该项目会在首次启动自动下载 IP 数据库,所以最好通过挂载目录的方式,将数据库目录挂在到本地,避免…

git reset --hard 回退过后如何在恢复到最新一次的提交

在使用 git reset --hard 回退到某个提交后,如果想要恢复到最新一次的提交,有几种方法可以实现: 方法一:使用 git reflog 恢复提交 git reflog 命令记录了本地仓库的引用变更历史,包括 HEAD 的移动。你可以使用它来找…

链表——反转链表

//反转链表 public class ReverseList {public static class Node {public int value;public Node next;public Node(int data) {this.value data;}}//反转单链表public static Node reverseList(Node head) {Node pre null;Node next null;while (head ! null) {//next节点…

Java零基础入门到精通_Day 4

方法的重载 就是同一个类中的相同方法名的多个方法,但是他们的参数不同,类型不同或者参数个数不同。 (与返回值无关) package Base_One;public class Base_005 {public static void main(String[] args) {// Main method logic …