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已经完成了类生命周期的大部分功能。





相关文章
|
3月前
|
JavaScript 前端开发
useEffect与副作用
useEffect与副作用
42 0
|
9月前
|
前端开发 JavaScript
深入理解React中的useEffect钩子函数
深入理解React中的useEffect钩子函数
70 0
|
9月前
|
前端开发 JavaScript 安全
useEffect 与 useLayoutEffect区别
useEffect 与 useLayoutEffect区别
52 0
|
3月前
|
前端开发
React中useEffect、useCallBack、useLayoutEffect
React中useEffect、useCallBack、useLayoutEffect
|
缓存 前端开发 算法
【译】你真的应该使用useMemo吗? 让我们一起来看看
- 当处理量很大时,应该使用 useMemo - 从什么时候 useMemo 变得有用以避免额外处理,阈值在很大程度上取决于您的应用程序 - 数据在处理非常低的情况下使用 useMemo
1973 0
|
14天前
|
前端开发 JavaScript
介绍React中的useEffect
【8月更文挑战第6天】介绍React中的useEffect
23 2
|
1月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
40 1
|
3月前
|
前端开发 JavaScript
react中的useEffect的使用
react中的useEffect的使用
24 2
|
3月前
|
前端开发 JavaScript 测试技术
React Hooks之useState、useRef
React Hooks之useState、useRef
|
3月前
|
存储 前端开发 JavaScript
React Hooks的useState、useRef使用
React Hooks的useState、useRef使用
51 2