要搞清楚这个hook函数，首先需要了解react的生命周期原理。如果我直接放这张图，新手肯定会傻眼的。这到底是什么？因为刚开始学习生命周期的时候，我也是一头雾水，下面通过实例来看吧！下面是我个人博客首页左侧的轮播图效果。手机端效果隐藏，手机端看不到效果。我建议在电脑上观看。:https://hanzhenfang.vercel.app/https://hanzhenfang.vercel.app/刚知道这个的时候，我的第一反应就是简单。我用uesStatehook不就好了吗？是啊，谁来调用呢？你把这个方法写在这里，没人用吗？你说，我可以只添加一个按钮吗？是的，可以加一个按钮点击然后开始实现换图的效果，但是客户需求是进入网页自动换图，怎么办？首先我们要有一个概念。我们需要用户点击博客页面，图片会随着时间变化。不幸的是，简单的useState无法完成任务。这时候我们就需要使用类组件类似的componentDidMount。不得不说，React在命名的时候真的是把语义做到了极致。did，有点英文知识的人都知道did是过去式，组件didMount，组件已经挂载，大白话就是我的组件已经渲染好了，找我干什么？巧合的是，我需要你帮我运行一下我的SetInterval，但是我突然意识到这是其他类组件的专属钩子函数，而我们是函数组件。别怕，useEffect来了。useEffect接收两个参数（一个参数是你想在页面渲染后立即执行的函数，第二个是引用对象）。如果你写一个空数组，那么useEffect就相当于只执行一次，因为引用对象是一个空数组，是永远不会变的，如果你写count，那么你的意思是count更新了，useEffect会被调用。这时候，你就会陷入误区。为了方便查看，我清空了部分内容，以后再说。ok，把刚才写的函数放到里面，好了，可以正常执行了。一开始，我也是这么想的。网上的教程视频说定时器需要清零。我在想，我为什么要清除它？这还不够满足??我的需求吗？我只是在自己写博客页面时才发现这是为什么。我们需要知道React是一个单页应用。我在代码中添加了一个console.log（“计时器仍在运行”）。这个时候看起来没什么。但是当我点击首页的时候，你会发现浏览器报错ok，说我的一个定时器还在运行，但是组件已经卸载了。这样在实际工作中会造成一些内存泄漏的危险。那么我们应该怎么办呢？我们希望当我们的定时器被卸载的时候，定时器能够被清除。方法也很简单，就是在timer里面返回一个清除timer的函数，不就可以了吗？你可能会有疑问，这个效果不是一开始执行就卸载了吗？React很贴心帮你自动处理effect中的第二个return语句。组件第二次更新时会自动调用（或者组件卸载时调用，return中的函数相当于一个类component.componentWillUnMountin.），不会在页面结束后立即调用完成了。组件的二次更新是什么？为了演示，把第二个参数改成count，也就是说如果我修改了count，effect会重新调用，相当于如果第二个参数是一个改变的值，那么useEffect就相当于变成了componentDidUpdate，我的更新结束了，你需要我做什么？接下来我们看看控制台是怎么输出的。你会发现第二个“timerisunloaded”没有执行。更新完成后自动清空之前的定时器，重新启动新的定时器，非常智能！！至此，useEffect已经完成了类生命周期的大部分功能。
