一、前言
本文基于开源项目：
https://github.com/facebook/react/blob/master/packages/react/src/ReactHooks.js
最近有好友问广东靓仔：怎么写文章频率降低了？
今年广东靓仔报名了软考，业余把精力更多投入到复习中。由于疫情影响，今天广州区暂停了软考上半年的相关科目，广东靓仔又来写文章了。
广东靓仔将从三个方面来梳理useEffect相关内容:
1、useEffect介绍
2、useEffect原理
3、useEffect源码解析
相信有不少小伙伴在使用useEffect过程中遇到过不少问题，广东靓仔找来了几个有bug的例子：
例子一：
// 弹框显示触发定时器 useEffect(() => { timer = setInterval(() => { if (showModal) { requestFun() } }, 1000) }, [showModal]) // 关闭弹框，清除定时器 const closeModal = () => { clearInterval(timer) }
弹框显示定时器开始执行，当关闭弹框。定时器居然没有清除，有bug
例子二：
useEffect(() => { let intervalId = setInterval(() => { fetchData(); }, 1000 * 60); return () => { clearInterval(intervalId); intervalId = null; } }, []) const fetchData = （） => { request({params}).then(ret => { if (ret.code === OK) { applyResult(ret.data); } }) }
经过一番操作后引用的值会调用上一次渲染的值，这是不对的
例子三：
当我们在useEffect调用第三方库的实例，然后在其他函数清除这个实例，发现无法清除。其他的小伙伴在用useEffect还遇到过其他的问题，这里就不一一展开，阅读完这篇文章后，一定会对useEffect有一个全面的理解。
二、useEffect介绍
React16.8版本中描述了在 React 渲染阶段，改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作是不被允许的，因为可能会产生莫名其妙的 bug 并破坏 UI 的一致性。 因此在使用useEffect完成副作用操作，赋值给useEffect的函数会在组件渲染到屏幕之后执行。
useEffect一般是在每轮渲染结束后执行，当然我们也可以让它在只有某些值改变的时候才执行。
useEffect有个清除函数，官方demo如下：
useEffect(() => { const subscription = props.source.subscribe(); return () => { // 清除订阅 subscription.unsubscribe(); }; });
一般在执行一些计时器或者订阅，我们会在组件卸载后，会清除这些内容。因此可以在清除函数里面做这些操作。
useEffect为防止内存泄漏，一般情况下如果组件多次渲染，在执行下一个effect 之前，上一个 effect 就已被清除。也就是说组件的每一次更新都会创建新的订阅。useEffect 的函数会在浏览器完成布局与绘制之后，在一个延迟事件中被调用。我们都知道一旦 effect 的依赖发生变化，它就会被重新创建，
例如：
useEffect( () => { const subscription = props.source.subscribe(); return () => { subscription.unsubscribe(); }; }, [props.source], );
useEffect传递第二个参数，它是 effect 所依赖的值数组。只有当依赖改变后才会重新创建订阅。
温馨提示：有很多小伙伴在日常项目开发的时候，使用这个依赖的时候，很容易留下bug。比如：一个编辑弹框功能，如果useEffect依赖只写了个id，这个时候如果是对同一条数据进行编辑是不会再次执行useEffect的逻辑的。
三、useEffect原理
useEffect实际上是ReactCurrentDispatcher.current.useEffect（源码解析会讲到）
useEffect原理可以简单理解为：
- 函数组件在挂载阶段会执行MountEffect，维护hook的链表，同时专门维护一个effect的链表。
- 在组件更新阶段，会执行UpdateEffect，判断deps有没有更新，如果依赖项更新了，就执行useEffect里操作，没有就给这个effect标记一下NoHookEffect，跳过执行，去下一个useEffect。
我们都知道useEffect 在依赖变化时，执行回调函数。这个变化是指本次 render 和上次 render 时的依赖之间的比较。
默认情况下，effect 会在每轮组件渲染完成后执行，而且effect 触发后会把清除函数暂存起来，等下一次 effect 触发时执行，大概过程如下：
温馨提示：使用 hooks 要避免 if、for 等的嵌套使用
