网站首页 > 教程文章 正文
React Hook(钩子)本质上是一个函数(命名上总是以use开头),该函数可以挂载任何功能。以 use 开头的函数被称为 Hook。Hook 比普通函数更为严格。你只能在你的组件(或其他 Hook)的 顶层 调用 Hook。
Hook种类:
1、useState(解决函数组件中无法使用状态的问题)
2、useEffect(解决函数组件中无法使用生命周期的问题)
State Hook
用法
State Hook是一个在函数组件中使用的函数(useState),用于在函数组件中使用状态
useState函数有一个参数,这个参数的值表示状态的默认值
- 函数有一个参数,这个参数的值表示状态的默认值
- 函数的返回值是一个数组,该数组一定包含两项 第一项: 状态的值 第二项: 一个函数,用来改变状态
一个函数组件中可以有多个状态,这种做法有利于横向切分关注点
Effect Hook
Effect Hook: 用于在函数组件中处理副作用
副作用:
- ajax请求
- 计时器
- 其它异步操作
- 更改真实DOM对象
- 本地存储
- 其它会对外部产生影响的操作
函数useEffect,接收一个函数作为参数,接收的函数就是需要进行副作用操作的函数。
副作用函数的运行时间点,是在页面完成真实的UI渲染之后。因此它的执行是异步的,不会阻塞浏览器。
猜你喜欢
- 2025-06-18 让 React 代码行数减少78%的 htmlx 有这么神?
- 2025-06-18 如何做 React 性能优化?(react 项目优化)
- 2025-06-18 React 渲染流程可视化,有大佬实现了!
- 2025-06-18 与 Vue 相伴四年,终究还是没抵住 React 的巨大诱惑
- 2025-06-18 25、Tailwind:魔法速记术——React 19 样式新思路
- 2025-06-18 推荐!React 生态不容错过的6大顶级虚拟滚动库?
- 2025-06-18 8.3K star!React Bits,让你拥有全网几乎所有动画效果
- 2025-06-18 前端开发React18 - useEffect(前端开发工程师是干什么的)
- 2025-06-18 react-store(react18+)-同步和异步操作仓库
- 2025-06-18 再见Cursor!Trae Pro 登场(cursor中的热门插件)
- 最近发表
-
- 一课译词:一刀两断(一刀两断成语解释)
- 核心短语break up用法解析(breakd短语)
- HTML+CSS 实现商品图片列表放大视觉效果 复制完整代码即可马上调用
- 前端实现右键自定义菜单(前端实现右键自定义菜单怎么设置)
- Python中docx与docxcompose批量合并多个Word文档并添加分页符
- Java 将Excel转为XML(java将xls转换成xlsx)
- jq+ajax+bootstrap改了一个动态分页的表格
- css兼容性问题及一些常见问题汇总大全,赶快收藏!
- Java 的业务逻辑验证框架 之-fluent-validator
- 小程序cover-view踩坑系列2(微信小程序overflow)
- 标签列表
-
- location.href (44)
- document.ready (36)
- git checkout -b (34)
- 跃点数 (35)
- 阿里云镜像地址 (33)
- qt qmessagebox (36)
- mybatis plus page (35)
- vue @scroll (38)
- 堆栈区别 (33)
- 什么是容器 (33)
- sha1 md5 (33)
- navicat导出数据 (34)
- 阿里云acp考试 (33)
- 阿里云 nacos (34)
- redhat官网下载镜像 (36)
- srs服务器 (33)
- pico开发者 (33)
- https的端口号 (34)
- vscode更改主题 (35)
- 阿里云资源池 (34)
- os.path.join (33)
- redis aof rdb 区别 (33)
- 302跳转 (33)
- http method (35)
- js array splice (33)