2.6 KiB
useEffect 和 Debounce
最近在学习 React + TypeScript 仿 Jira 项目，不得不说这个课程是真的好，可能因为比较新的缘故，老师在一些库的选择上都会比较新，最最让我惊喜的是这门课程还用到了ReactRoute6，正好苦于网上没有清晰明了的教程，这不就来了。
在课程里面，有一个自定义 Hook 的小示例，就是用 React Hook 实现 Debounce 的功能，Debounce 的功能要求很简单，就是通过一些手段控制接口的请求次数，用定时器实现的Debounce 就是一个很典型的例子，课程里边的 Debounce Hook 也是使用定时器的方式实现，不过在编写这个自定义 Hook 的时候，用到了 React 自带的 useEffetc 这个 Hook，这不免让我有些好奇，这个Hook是怎么个原理，能够做些简单的逻辑就实现 Debounce 的呢？ 首先先来捋清 useEffetc 这个 Hook 的参数和含义，useEffetc 第一个参数接收一个回调函数，第二个参数是一个数组，在数组中传入的值会作为函数的执行条件，什么意思呢，就是说第二个参数的值会在下一次 useEffect 执行的时候被比较，如果每个值都相同，那么 useEffect 就不执行，如果值发生了变化，useEffetc 就会被执行，这个数组还可以是一个空数组，表示 useEffect 只在函数组件初始化的时候执行。
接下来就是有意思的地方了，还记得前面说到的第一个参数回调函数吗？这个回调函数可以 return 一个函数，这个被 return 的函数，会在下一次 useEffect 被执行之前执行，用于清除上一个函数的副作用，至于什么是副作用，这个其实是函数式编程专有的名词，在这里不展开讲，以后写个新的文章讨论什么是函数式编程，到这里，就已经把 useEffect 的基本功能给说清楚了 ，这个时候可以回过头来看，useEffect 的执行时机是什么时候，默认情况下，useEffect 会在每轮的渲染结束之后执行，并且 React 为了保证严格的 render -> useEffect 顺序，所以在下一次 render 执行之前一定会执行一次 useEffect，那么我在 useEffect 的第一个参数回调函数中放一个定时器，并在 return 中返回一个清除定时器的函数，那么我不就可以在每一次 render 执行之后 useEffect 执行之前清除上一次在 useEffect 中存放的定时器了吗？这里为了保证每一次都会有 render 触发 useEffect，还需要用到 useState，这样不就是很典型的 Debounce 实现思路吗？
具体代码如下图
!