ReactHook—— useEffect

简介: ReactHook—— useEffect

要弄清楚这个钩子函数,你首先需要了解react的生命周期原理。

image.png

我直接放这张图肯定会有新手直接傻眼,这什么鬼玩意啊?因为我刚学到生命周期的时候也是一脸懵逼,通过实际例子来看!

下面是我个人博客首页左侧轮播图的效果实现,手机端效果隐藏了,手机端看不到效果。推荐电脑端看一下。

image.png

刚学到这里的时候,我第一反应是简单,我用uesState这个钩子不就行了吗?

image.png

是,谁去调用呢? 你这个方法写在这里,没人用啊?你说,我加个按钮不就行了吗?

是,你加个按钮可以点击一下然后开始实现换图片的效果,但是客户需求就是你进去网页图片自动就换,你怎么办呢?

首先我们要有一个概念,我们是需要用户点击博客页面,图片就随着时间开始变化的。

很遗憾,单纯的useState是完成不了任务的。 这时候我们就需要用到类似于class组件里的 componentDidMount 不得不说React在起名字的时候真的是把语义话做到了极致。Did,有点英语常识的都知道did是过去式,组件didMount,组件已经挂载好了

大白话就是 我组件已经渲染好了,你需要我干什么?巧了嘛,我需要你帮我运行我的SetInterval啊

但是突然回过神来,那是人家类组件的专属钩子函数,我们是函数组件啊。别怕,useEffect来了。

image.png

useEffect接收两个参数(一个参数是你希望在页面渲染完成以后立即执行的函数,第二个是参考对象)如果你写入空数组,那么useEffect就相当于只执行一次,因为参考对象空数组永远也不会发生变化,如果你写了count,那么你的意思就是count更新,就会调用useEffect。这时候就会陷入一个误区。为了方便看,我清除了一部分内容,后面再讲。

image.png

ok,我们把刚刚写好的函数放进去,好了,可以正常执行了。刚开始我也是这样想的,网上的教程视频说的需要清除计时器,我就在想,我清除干嘛啊,这不是已经可以满足我的需求了吗?当我自己写博客页面的时候,我才知道这是为什么。我们要知道react是一个单页面应用,我在代码中加了一个console.log("计时器还在运行")

image.png

这时候起来没什么

image.png

可当我点进去主页的时候,你会发现浏览器报错了,它说一个我的计时器还在运行,但是这个组件已经被卸载了。这在实际工作当中会发生一些内存泄漏的危险。

image.png

那咋办呢?我们希望在我们的计时器卸载的时候,可以清除这个计时器,方法也非常简单,那就是在计时器的内部 给他返回一个清除计时器的函数不就行了吗?

image.png

你可能会有疑问,这effect执行不就刚开始执行起来就马上卸载了吗?

react是非常贴心的帮你自动处理在effect中的第二个return语句,它会在组件第二次更新的时候自动调用,(或者组件卸载的时候才会调用,return里的函数相当于类组件里的componentWillUnMount。)它并不会在页面完成以后马上调用。

什么是组件第二次更新呢?为了演示,第二个参数修改为count,意思为 我修改了count,就会重新调用一次effect,就相当于如果第二个参数是一个变化的值,那么useEffect就相当于变成了componentDidUpdate,我更新完了,你需要我做什么?

image.png

接下来我们看控制台怎么输出。你会发现第二个“计时器被卸载”并不会执行。

image.png

image.png

它很智能的在完成更新后自动清除了上一个计时器然后重新开启了新的计时器!!

至此,useEffect已经完成了类生命周期的大部分功能。





相关文章
|
1月前
|
设计模式 人工智能 缓存
2025架构革命:一文深度揭秘AI四维进化(MoE/GraphRAG/智能体/HyDE)
本文深入解析大模型核心技术与实践原理,涵盖MCP、RAG、Agent、微调等关键技术,结合架构演进与实战技巧,助你构建高性能AI系统,建议点赞收藏。
453 0
|
安全 网络安全 数据库
达梦数据库 忘记 SYSDBA 密码 处理方法
达梦数据库支持四种安全验证模式:数据库身份验证、基于操作系统的身份验证、外部身份验证和UKEY验证。当忘记SYSDBA密码时,可通过启用操作系统认证模式来恢复:修改`dm.ini`配置文件启用`ENABLE_LOCAL_OSAUTH = 1`,重启服务后,使用`disql / as sysdba`登录修改密码。之后,禁用操作系统认证,恢复原验证模式,确保数据库安全。
3654 0
|
程序员 人工智能 Serverless
通义灵码保姆级教程:官网、安装、使用指南、常见问题、线上活动、官方答疑
通义灵码保姆级教程:官网、安装、使用指南、常见问题、线上活动、官方答疑
21585 1
|
4月前
|
人工智能 自然语言处理 前端开发
Trae插件Builder模式深度测评:从编程助手到AI工程师的进化
Trae插件最新推出的Builder模式标志着AI辅助编程工具从简单的代码补全向“AI工程师”角色的转变。该模式允许开发者通过自然语言描述项目需求,自动生成完整的项目结构、代码文件和开发流程,支持VSCode、JetBrains IDE及在线Web版本。Builder模式的核心功能包括自然语言项目初始化、智能项目架构设计和多文件协调代码生成,显著提升了开发效率,降低了技术门槛。然而,它在处理复杂业务逻辑和高度定制化需求方面仍有局限。未来,Builder模式将集成云部署、测试套件生成和DevOps流水线等功能
1146 2
|
网络安全 开发工具 git
git 出现错误:kex_exchange_identification: read: Connection reset by peer fatal
git 出现错误:kex_exchange_identification: read: Connection reset by peer fatal
git 出现错误:kex_exchange_identification: read: Connection reset by peer fatal
|
存储 移动开发 HTML5
SessionStorage 和 LocalStorage 有什么区别?
SessionStorage 和 LocalStorage 有什么区别?
563 3
|
9月前
|
IDE iOS开发 Python
小白如何开始使用通义灵码(含安装IDE、安装灵码插件)
PyCharm 和 IntelliJ IDEA 下载安装及通义灵码插件下载安装说明
8429 9