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

news2024/11/25 13:16:13

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.coloradmin.cn/o/1872269.html

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

相关文章

新手向导:掌握Axure RP的第一步

其实很多时候,我们很容易把教程做得太复杂,让学生失去重点被复杂的理论吓到。入门基础的时候只需要先弄清楚两个核心内容,学起来就容易多了:一是简单了解这个软件,二是学习这个软件的基本操作。所以如果你问我什么是好的 Axure RP…

chrome 配置允许跨域

目录 1.Chrome跨域插件配置 1.1启动插件 1.2. 设置本地调试跨域 2 Firefox跨域插件 2.1. 安装插件 CORS Everywhere 2.2. 启动插件 3 工具下载链接 1.Chrome跨域插件配置 使用chrome插件“Allow CORS: Access-Control-Allow-origin ”来解决跨域问题。 点击pin图标&…

小语言模型SLM 百科全书

想象一下这样一个世界:智能助手不再驻留在云端,而是驻留在你的手机上,无缝理解你的需求并以闪电般的速度做出响应。这不是科幻小说;这是小型语言模型 (SLM) 的前景,这是一个快速发展的领域,有可能改变我们与…

倒装COB封装技术与常规SMD封装技术差异对比

倒装COB显示屏与常规SMD LED显示屏一个很大的差异点就是在于封装工艺的不同,COB(Chip on Board)封装和SMD(Surface Mounted Device)封装是LED显示屏领域中两种常见的技术,所表现出来的差异主要在于封装结构…

“卷王”新思路!孟德尔随机化联合共定位,IF冲上12+

今天分享的这篇文章很有意思,用上了统计学中的“顶流CP”孟德尔随机化贝叶斯共定位,强强联手,让孟德尔随机化不再单调!本文思路清晰,设计严谨,结果可靠,想学习孟德尔随机化发文套路的千万不要错…

【selenium 】操作元素

操作元素 元素操作鼠标操作键盘操作 元素操作 元素操作示例清空输入框clear()deiver.find_element_by_id(“username”).clear()输入文字send_keys()deiver.find_element_by_id(“username”).send_keys(‘zs’)元素点击 click()deiver.find_element_by_id(“login”).click()…

手持小风扇哪个牌子比较好?五大热门手持小风扇品牌推荐

炎炎夏日,真的需要一款随身小风扇来拯救我们的高温困境!不过,市面上的选择太多了,真的让人眼花缭乱。今天,我就给大家快速推荐五款热门的手持小风扇,它们不仅轻便易携,而且各有特色。有的是风力…

vue3中若v-model绑定的响应字段出现三级,该如何实现rules验证规则

比如以下内容: 配置的rules内容 const rulesref({title:[{required:true,message:"请输入标题",trigger:"blur"},{max:50,message:"最大不能超过256个字",trigger:"blur"}],Category:[{required:true,message:"请选择…

使用Vue-cli脚手架创建uni-app项目(Vue2版本)

文章目录 前言准备工作接下来创建我们的 uni-app 项目 前言 uni-app官方说除了HBuilderX可视化界面,也可以使用 cli 脚手架,可以通过 vue-cli 创建 uni-app 项目。 uni-app官网文档 准备工作 需要安装 node.js 与 vue-cli 脚手架 我是用的版本如下 no…

智芯开发板(Z20K11x)介绍

一、智芯简介 智芯半导体(Zhixin Semiconductor)成立于2019年8月8日,在天津、合肥、苏州、南京、上海等地均 已设立分支机构;提供高可靠性的汽车电子芯片,广泛用于包括汽车车身电子 控制、新能源汽车控制、动力系统、汽车自动驾驶监控芯片等…

嵌入式学习——数据结构(队列、二叉树)——day49

1. 队列 1.1 定义 是一种线性数据结构类型,可以用数组或链表等基础数据结构来实现。它遵循先进先出(FIFO,First In First Out)的原则。这意味着最先进入队列的元素会最先被移出。 1.2 基本概念 队列(Queue&#xff…

微机原理与接口技术:重点内容|计算机系统|学习笔记

系列目录 前言 只将最重要的知识点考点列出来方便学习复习 目录 系列目录前言第1章 微型计算机概述第2章 16位和32位微处理机🌟16位微处理器 8086 第3章 Pentium 的指令系统常用指令 第4章 存储器、存储管理和高速缓存技术第5章 微型计算机和外设的数据传输第6章 串…

ollama大模型qwen2:7b性能测试

部署環境信息: (base) rootalg-dev17:/opt# lscpu Architecture: x86_64CPU op-mode(s): 32-bit, 64-bitAddress sizes: 45 bits physical, 48 bits virtualByte Order: Little Endian CPU(s): 8On-line CP…

Application Studio 学习笔记(3)

一、工具栏按钮 1、panel控件添加工具栏按钮 展开panel控件的Advanced属性并点击Action Data,进入Action Data编辑界面 新增Action Data数据,Sequence设定工具按钮的显示顺序 默认工具按钮会显示在弹出工具栏中 勾选Add to Primary ToolBar后&#xff…

电容式单按键触摸检测及接近感应控制芯片 SD8233LQG

SD8233LQG是一款电容式单按键触摸检测及接近感应控制芯片。采用 CMOS 工艺制造,内建稳压和去抖动电路,高可靠性,专为取代传统按键开关而设计。超低功耗与宽工作电压特性,广泛应用于 TWS及 DC 应用的触摸产品中,实现产品…

vue3 中的根据某些特定的文字来筛选数组数据

现在有一批这样的数据 这样的数据 我想根据 hallName 来筛选数据 比如关键字有 我不需要 带有下面字符换的数组数据 const importantData ref(["VIP", "CINITY", "杜比", "IMAX", "4DX", vip, Vip]) 使用some 方法 arr…

笔记-python爬虫概述

目录 常用第三方库 爬虫框架 动态页面渲染1. url请求分析2. selenium3. phantomjs4. splash5. spynner 爬虫防屏蔽策略1. 修改User-Agent2. 禁止cookies3. 设置请求时间间隔4. 代理IP池5. 使用Selenium6. 破解验证码常用第三方库 对于爬虫初学者,建议在了解爬虫原…

FFmpeg中位操作相关的源码:GetBitContext结构体,init_get_bits函数、get_bits1函数和get_bits函数分析

一、引言 由《音视频入门基础:H.264专题(3)——EBSP, RBSP和SODB》可以知道,H.264 码流中的操作单位是位(bit),而不是字节。因为视频的传输和存贮是十分在乎体积的,对于每一个比特(bit&#xf…

CentOS安装Docker教程(包含踩坑的经验)

目录 一.基础安装 ▐ 安装Docker 二.启动Docker服务 三.配置Docker镜像加速 一.基础安装 在安装Docker之前可能需要先做以下准备 首先如果系统中已经存在旧的Docker,则先卸载: yum remove docker \docker-client \docker-client-latest \docker-…

Modbus转Profibus网关在汽车行业的应用

一、前言 在当前汽车工业的快速发展中,汽车制造商正通过自动化技术实现生产的自动化,目的是提高生产效率和减少成本。Modbus转Profibus网关(XD-MDPB100)应用于汽车行业,主要体现在提升自动化水平、优化数据传输以及实…