hook入门学习心得

简介: Hook是函数式组件,相对于类组件来讲更容易理解和使用,接下来我将简单介绍如何去理解和使用hook。

      Hook是函数式组件,相对于类组件来讲更容易理解和使用,接下来我将简单介绍如何去理解和使用hook。

一、State Hook —-- 声明和修改变量

1.png

例子中声明了一个函数名为HomePagehook组件,功能是简单的计数器。useState就是一个hook,在函数组件中调用这个hook会返回一对值,当前状态和更新它的函数。可以这样去理解,当前状态count是全局可用的变量名,并被初始化为0,在触发函数的情况下,setCount就会更新count的值。

二、Effect Hook ---- 操作副作用

2.png

React 渲染组件时,会保存已使用的 effect,并在更新完 DOM 后执行它。由于useEffect在组件内部,所以可以直接访问到组件内部所有的state及相关props值,count值每变化一次就会调用一次useEffect函数。useEffect相当于生命周期中的componentDidMountcomponentDidUpdate componentWillUnmount 这三个函数的组合。组件在每次渲染后会执行useEffect的第一个参数,useEffect每次渲染时第二个参数默认为空数组,传入count仅在count更改时更新,且第二个参数可接受多个变量。

三、自定义hook

自定义hook是一种自然遵循 Hook 设计的约定,完全可以理解为是一个独立出来以use开头的函数,在不同组件中每次调用hook都会获取到完全独立的stateeffect,所以当两个组件同时调用同一自定义的hook组件时,这两个组件不会共享自定义hook中的state

3.png

四、useRef

useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。

本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的盒子。它可以很方便地保存任何可变值,其类似于在 class 中使用实例字段的方式。这是因为它创建的是一个普通 Javascript 对象。 useRef() 和自建一个 {current: ...} 对象的唯一区别是,useRef 会在每次渲染时返回同一个 ref 对象。

4.png

以上就是使用hook常见的常用的部分的知识,更多内容请参考官方网站进行深入学习,链接如下:

https://react.docschina.org/docs/hooks-intro.html

相关文章
|
6月前
|
人工智能 自然语言处理 搜索推荐
2025AI数字人企业厂商排名与重点榜单推荐及新选择指南
AI数字人正以智能交互、情感表达与任务执行能力重塑产业生态。依托AIGC、3D建模与大模型技术,广泛应用于电商、金融、教育等领域,实现服务自动化、内容高效创作与人机协同升级。像衍科技、阿里、百度等企业引领技术创新,推动数字人从“工具”迈向“伙伴”,成为连接虚拟与现实的新型数字力量。
|
8月前
|
机器学习/深度学习 人工智能
破译AI指纹:如何检测内容是否出自机器之手?
破译AI指纹:如何检测内容是否出自机器之手?
375 3
|
消息中间件 缓存 NoSQL
Redis原理—5.性能和使用总结
本文详细探讨了Redis的阻塞原因、性能优化、缓存相关问题及数据库与缓存的一致性问题。同时还列举了不同缓存操作方案下的并发情况,帮助读者理解并选择合适的缓存管理策略。最终得出结论,在实际应用中应尽量采用“先更新数据库再删除缓存”的方案,并结合异步重试机制来保证数据的一致性和系统的高性能。
Redis原理—5.性能和使用总结
|
SQL JavaScript 前端开发
Vue实现动态数据透视表(交叉表)
Vue实现动态数据透视表(交叉表)
584 13
|
移动开发 前端开发 UED
React 音频预览组件:Audio Preview
本文介绍如何使用 React 构建音频预览组件,涵盖基础实现、常见问题及解决方案。通过 HTML5 `<audio>` 标签和 React 状态管理,实现播放控制。解决文件路径、浏览器兼容性等问题,并优化性能,避免状态不同步和内存泄漏,提升用户体验。
355 22
|
存储 弹性计算 运维
保障业务连续性,企业灾备建设新思路
本次分享主题为“保障业务连续性,企业灾备建设新思路”,由阿里云专家李媛和胡航丽主讲。内容涵盖企业业务连续性与灾备建设的重要性、新产品及其界面特点、Regional ESID、云备份Call back up、跨账号备份等。重点介绍了数据灾备中心BDRC,其具备全面覆盖阿里云资源、可视化设计、简化运维等特点,帮助企业高效实现数据灾备及合规管理。同时,针对企业面临的灾备挑战,如勒索病毒攻击、数据误删等,提供了不可变备份、自动病毒检测等功能,确保数据安全性和业务连续性。最后,通过案例展示了如何通过云备份服务满足企业的高阶需求,降低运维成本并提高效率。
490 13
|
存储 缓存 负载均衡
从零到一:分布式缓存技术初探
分布式缓存通过将数据存储在多个节点上,利用负载均衡算法提高访问速度、降低数据库负载并增强系统可用性。常见产品有Redis、Memcached等。其优势包括性能扩展、高可用性、负载均衡和容错性,适用于页面缓存、应用对象缓存、状态缓存、并行处理、事件处理及极限事务处理等多种场景。
865 1
|
传感器 物联网 定位技术
低功耗蓝牙
低功耗蓝牙(Bluetooth Low Energy,简称BLE)是一种无线通信技术,专为低功耗应用设计。它在保持蓝牙无线连接的同时,大幅降低了能耗,适用于各种小型设备和传感器,如智能手环、健康监测器等。
1403 2
|
存储 编解码 算法
微帧科技:综合多项指标评价视频质量,才能更接近主观感受
视频质量评价指标如PSNR、SSIM和VMAF是衡量画面质量的重要工具,但不应成为视频工作者的唯一目标。微帧致力于优化画质,提升观看体验,强调综合评估指标,以实现最接近人眼主观感受的效果。本文探讨了PSNR avg.MSE与PSNR avg.log的区别,以及VMAF的优势与不足。