前言
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
如果你会 Vue，你又会发现 useEffect 的第二个参数使它又好像 Vue 的 Watch 监听, 当第二个参数内的数据发生变化，就会去执行一遍 useEffect 里面的代码
但是这里面又有一个要注意的东西——Effect的清除函数 ，官方文档说 React 会在组件卸载的时候执行清除操作，这句话有点不好理解。
正文
上面代码在组件外部定义了一个自定义 Hook , delay 属性绑定到了右边的那个输入框，当改变输入框内部的值，即delay 改变，effect 内部代码执行。
上图是我刷新后的状态，右边终端打印了 1000---外层，可以发现清除函数里面的 内层 并没有打印，组件此时并没有卸载，清除函数不执行，符合预期。
下面我去改变输入框内部的值，看下会有什么结果。
当我把输入框里面的值换成 100 后，effect 第二个参数发生改变，它首先执行的是清除函数，而清除函数里面拿到的值 delay 是 1000，输出 1000---内层，然后以更新后的值去执行 effect 里面的代码，输出 100---外层
结尾
通过上面的例子得出以下结论：
可以简单粗暴的理解为：组件每次渲染都执行 useEffect 里面内容，但不包括清除函数。组件要发生下一次渲染之前，执行清除函数
源码链接：
- 在自定义 hook 里面写定时器 codesandbox.io/s/l240mp2pm…
如果搞不清楚执行顺序，你会发现很难理解链接里面的代码
