共计 1483 个字符，预计需要花费 4 分钟才能阅读完成。
要弄清楚这个钩子函数，你首先须要理解 react 的生命周期原理。
我间接放这张图必定会有老手间接傻眼，这什么鬼玩意啊？因为我刚学到生命周期的时候也是一脸懵逼，通过理论例子来看！
上面是我集体博客首页左侧轮播图的成果实现，手机端成果暗藏了，手机端看不到成果。举荐电脑端看一下。：https://hanzhenfang.vercel.app/https://hanzhenfang.vercel.app/
刚学到这里的时候，我第一反馈是简略，我用 uesState 这个钩子不就行了吗？
是，谁去调用呢？你这个办法写在这里，没人用啊？你说，我加个按钮不就行了吗？
是，你加个按钮能够点击一下而后开始实现换图片的成果，然而客户需要就是你进去网页图片主动就换，你怎么办呢？
首先咱们要有一个概念，咱们是须要用户点击博客页面，图片就随着工夫开始变动的。
很遗憾，单纯的 useState 是实现不了工作的。这时候咱们就须要用到相似于 class 组件里的 componentDidMount 不得不说 React 在起名字的时候真的是把语义话做到了极致。Did，有点英语常识的都晓得 did 是过来式，组件 didMount，组件曾经挂载好了
大白话就是 我组件曾经渲染好了，你须要我干什么？巧了嘛，我须要你帮我运行我的 SetInterval 啊
然而忽然回过神来，那是人家类组件的专属钩子函数，咱们是函数组件啊。别怕，useEffect 来了。
useEffect 接管两个参数 (一个参数是你心愿在页面渲染实现当前立刻执行的函数，第二个是参考对象) 如果你写入空数组，那么 useEffect 就相当于只执行一次，因为参考对象空数组永远也不会发生变化，如果你写了 count，那么你的意思就是 count 更新，就会调用 useEffect。这时候就会陷入一个误区。为了不便看，我革除了一部分内容，前面再讲。
ok，咱们把刚刚写好的函数放进去，好了，能够失常执行了。刚开始我也是这样想的，网上的教程视频说的须要革除计时器，我就在想，我革除干嘛啊，这不是曾经能够满足我的需要了吗？当我本人写博客页面的时候，我才晓得这是为什么。咱们要晓得 react 是一个单页面利用，我在代码中加了一个 console.log（” 计时器还在运行 ”）
这时候起来没什么
可当我点进去主页的时候，你会发现浏览器报错了，它说一个我的计时器还在运行，然而这个组件曾经被卸载了。这在理论工作当中会产生一些内存透露的危险。
那咋办呢？咱们心愿在咱们的计时器卸载的时候，能够革除这个计时器，办法也非常简单，那就是在计时器的外部 给他返回一个革除计时器的函数不就行了吗？
你可能会有疑难，这 effect 执行不就刚开始执行起来就马上卸载了吗？
react 是十分贴心的帮你主动解决在 effect 中的第二个 return 语句，它会在组件第二次更新的时候主动调用，(或者组件卸载的时候才会调用，return 里的函数相当于类组件里的 componentWillUnMount。)它并不会在页面实现当前马上调用。
什么是组件第二次更新呢？为了演示，第二个参数批改为 count，意思为 我批改了 count，就会从新调用一次 effect，就相当于如果第二个参数是一个变动的值，那么 useEffect 就相当于变成了 componentDidUpdate，我更新完了，你须要我做什么？
接下来咱们看控制台怎么输入。你会发现第二个“计时器被卸载”并不会执行。
它很智能的在实现更新后主动革除了上一个计时器而后从新开启了新的计时器！！
至此，useEffect 曾经实现了类生命周期的大部分性能。