React小记(五)_Hooks入门到进阶

React 16.8 版本 类组件 函数组件 两种组件共存,到目前 React 18 版本,官方已经不在推荐使用类组件,在函数组件中 hooks 是必不可少的,它允许我们函数组件像类组件一样可以使用组件的状态,并模拟组件的生命周期等一系列行为。

        本文为 react_hooks 的汇总,希望对正在学习react-hooks的你,能够有所帮助!

一、核心hooks

我们知道在类组件中 react 具有三大属性,分别为 state、props 、ref,在 hooks 中同样存在相应的 hooks

1、useState
useStateicon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139679655
2、useRef
useReficon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139679773
3、forwardRef
forwardReficon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139679851
4、uselmperativeHandle

useImperativeHandleicon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139679920

二、模拟生命周期 hooks

 
1、useEffect
useEffecticon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139679969
2、useLayoutEffect

useLayoutEffecticon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139680028

三、组件通信 hooks


1、useReducer
useReducericon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139995775
2、useContext

useContexticon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139995886

四、性能优化 hooks


9、useMemo和memo函数
useMemo和memo函数icon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139995958
10、useCallback
useCallbackicon-default.png?t=N7T8https://blog.csdn.net/weixin_61791370/article/details/139996016

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

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

相关文章

ChatGPT-4o医学应用、论文撰写、数据分析与可视化、机器学习建模、病例自动化处理、病情分析与诊断支持

2022年11月30日,可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT-3.5,将人工智能的发展推向了一个新的高度。2023年11月7日,OpenAI首届开发者大会被称为“科技界的春晚”,吸引了全球广大…

Cesium大屏-vue3注册全局组件

1.需求 说明:产品经理要求开发人员在地图大屏上面随意放置组件,并且需要通过数据库更改其组件大小,位置等;适用于大屏组件中场站视角、任意位置标题等。 2.实现 2.1GlobalComponents.vue 说明:containerList可以通…

力扣热100 哈希

哈希 1. 两数之和49.字母异位词分组128.最长连续序列 1. 两数之和 题目:给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。你可以假设每种输入只会对应一个答案。…

蜜雪冰城小程序逆向

app和小程序算法一样 小程序是wasm

SpringMVC的视图

文章目录 1、ThymeleafView2、转发视图3、重定向视图4、视图控制器view-controller SpringMVC 中的视图是 View 接口,视图的作用渲染数据,将模型 Model 中的数据展示给用户SpringMVC视图的种类很多,默认有转发视图和重定向视图当工程引入jstl…

楼层分户项目分析

文章目录 1. 区域绘制2. 户型切分3. 楼房分层4. 编辑房户信息5. 查看房户信息6. 数据库6.1. 楼栋数据库6.2. 单位数据库 7. 房户数据库 1. 区域绘制 点击绘制图形,激活画笔,右键结束绘制。 输入框可以更换地址前缀。 分户坐标是由绘制的多个点组成的&…

在宿主机上个修改虚拟机的用户密

1、远程修改虚拟机密码 1.1在虚拟机上安装Qemu Guest Agent yum -y install qemu-guest-agent --enablerepoC7.4* systemctl enable qemu-guest-agent systemctl start qemu-guest-agent vim /etc/sysconfig/qemu-ga #注释此行 systemctl restart qemu-guest-agent.servic…

LabVIEW电压电流实时监测系统

开发了一种基于LabVIEW和研华(Advantech)数据采集卡的电压电流实时监测系统,通过高效的数据采集和处理,为工业和科研用户提供高精度、实时的电压电流监测解决方案。系统采用研华USB-4711A数据采集卡,结合LabVIEW编程环…

SAP 接口-银行账号主数据维护接口【MDM->SAP】开发说明书(包括测试样例、程序代码仅作参考,不保证一定可以运行)

接口映射字段 开发通用说明 根据MDM传输字段调用BAPI生成银行账号及开户行。 开户行维护BAPI【BAPI_BANK_CREATE】 银行账号维护BAPI【BAPI_FCLM_BAM_AMD_BNKANT】 接口字段【ZZZH 主账户标识】=1时字段【DTAAI】DME标识赋值:常用; 接口字段【ZZZH 主账户标识】=0时字段…

[C++][设计模式][迭代器模式]详细讲解

目录 1.动机2.模式定义3.要点总结4.代码感受 1.动机 在软件构建过程中,集合对象内部结构常常变化各异。但对于这些集合对象,我们希望不暴露其内部结构的同时,可以让外部客户代码透明地访问其中包含的元素; 同时这种”透明遍历“也…

Optional类方法

Optional类 简介方法empty()方法of(T value)ofNullable(T value)filter(Predicate<? super T> predicate)get()ifPresent(Consumer<? super T> consumer)isPresent()map(Function<? super T,? extends U> mapper)orElse(T other)orElseGet(Supplier<?…

Linux运维:mysql高级查询语句(2)

目 录 一、创建数据库&#xff1a; 二、创建表结构&#xff1a;DDL 2.1 学生表s&#xff1a; 2.2 成绩表sc&#xff1a; 2.3 课程表c&#xff1a; 三、录入数据&#xff1a;DML 3.1 对学生表s的数据录入&#xff1a; 3.2 对成绩表sc的数据录入&#xff1a; 3.3 对课…

【MySQL】数据库——备份与恢复,日志管理1

一、数据备份的重要性 1.备份的主要目的是灾难恢复 在生产环境中&#xff0c;数据的安全性至关重要 任何数据的丢失都可能产生严重的后果造成数据丢失的原因&#xff1a; 程序错误人为,操作错误运算错误磁盘故障灾难&#xff08;如火灾、地震&#xff09;和盗窃 2.数据库备份…

【云原生】服务网格(Istio)如何简化微服务通信

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、微服务架构的兴起 2、Istio&#xff1a;服务网格的佼…

AI绘画Stable Diffusion 超强一键去除图片中的物体,免费使用!

大家好&#xff0c;我是设计师阿威 在生成图像时总有一些不完美的小瑕疵&#xff0c;比如多余的物体或碍眼的水印&#xff0c;它们破坏了图片的美感。但别担心&#xff0c;今天我们将介绍一款神奇的工具——sd-webui-cleaner&#xff0c;它可以帮助我们使用Stable Diffusion轻…

音乐:触动心灵的艺术语言

Enjoy your music 音 乐 作为一种跨越时空和文化的艺术形式&#xff0c;拥有着无穷的魅力和力量。 它不仅能够带给我们愉悦的听觉享受&#xff0c;还对我们的身心健康、认知发展和社会交往产生着深远的影响。 一、音乐的基本元素 音乐由多个基本元素构成&#xff0c;包括…

python-逻辑语句

if else语句 不同于C&#xff1a;else if range语句&#xff1a; continue continue的作用是&#xff1a; 中断所在循环的当次执行&#xff0c;直接进入下一次 continue在嵌套循环中的应用 break 直接结束所在的循环 break在嵌套循环中的应用 continue和break&#xff0c;在…

SAP AFAB 资产过账如何查看配置的对应的会计科目

首先查看资产AS03 科目定位码 T004 然后去找对应的科目 AO93

绘唐3一键追爆款文刻创作聚星文社

聚星文社是一个中国的文学社交平台&#xff0c;提供了一个让作家和读者相互交流和分享作品的平台。 在聚星文社&#xff0c;作家可以在平台上发布自己的作品&#xff0c;获得读者的阅读和评论&#xff0c;同时也可以与其他作家进行交流与学习。 点击下载即可 读者可以在平台上…

Node.js单点登录SSO详解:Session、JWT、CORS让登录更简单

文章目录 一、SSO介绍1、使用SSO的好处 二、中间件介绍1、Express安装导入使用 2、cors安装导入配置 3、express-session安装导入配置使用 4、jsonwebtoken安装导入使用 5、jwt和session对比 三、SSO实现方案1、安装依赖2、结构3、实现原理 四、示例代码1、nodejs端 server/ind…