重点来了，UseEffect如何让使用者在函数组件中执行副作用操作

作者 |这波能反杀丶,来源 |这波能反杀(ID：keepKilling),当了二十多天废物，今天开始更新，让大家久等了。花了挺长的时间优化文章 UI 细节，进一步提高阅读体验，大家多多感受一下.,useEffect 是一个难以掌握的知识点。许多人对它半知半解，因此他们觉得函数式组件不受控制。,除了本身难以理解之外，React 还提供了一个类似的 hook：useLayoutEffect 来增加学习难度，对于新手来说，这可要了老命了。,许多朋友试图利用 class 语法中的生命周期来类比理解 useEffect，因为官方文档就是这么引导的，那么他们多半会陷入一些误区，因此，学习之前，大家需要明确的是，生命周期函数与 useEffect 是不同的。,要充分理解并使用该方法，你需要对闭包、同步、异步、事件循环等基础概念有清晰认知。,useEffect 可以让使用者在函数组件中执行副作用操作。,那什么是副作用操作呢?,在 React 中，由 state 的变化导致 UI 发生变化的过程是正常操作，其他操作行为：例如数据请求、直接手动修改 DOM 节点、直接操作页面「修改页面标题等」、记录日志等都是副作用操作。,副作用操作是相对于操作 state 而言的。,每一次因为 state 的改变，都有一次对应副作用函数的执行时机。如果 state 多次改变，那么就有多次对应副作用的执行时机。,例如：我希望记录点击的次数。,该次数不仅要在页面上显示，也要在页面标题中显示。,我们就可以给出如下代码来实现需求。,在该例子中，修改页面标题的行为是副作用行为，因此我们可以直接使用 useEffect 来定义它。useEffect 的第一个参数为一个回调函数，该回调函数就是我们上面说的副作用函数「effect」，我们想要执行的副作用逻辑都写在该函数中。,useEffect 是 React 提供的 Hook，它能够帮助我们定义 effect 函数。,第一个参数就是副作用函数 effect。,第二个参数表示依赖项，是一个可选参数。当不传入该参数时，每次 UI 渲染 effect 函数都会执行。,但是大多数时候我们并不想任何 state 的变化都一定要执行 effect 函数，这个时候我们可以传入依赖项数组。使用时请确保依赖项数组中为 state/props 的值，表示 effect 只会响应依赖项中状态的变化。,只有当依赖项中是 state 发生变化时，effect 才会与之对应的执行。,不同的 state 数据变化通常对应不同的副作用操作。因此我们可以在函数组件中，定义多个 effect。,除此之外，我们还可以传入空数组作为依赖项，用于表示依赖项不会发生变化。因此，空数组对应的 effect，就只会在初始化时执行一次，以后就再也不会执行了。,我们通常利用这个特性完成一些初始化工作，例如请求页面数据。,有的时候，副作用函数 effect 执行会留下一些痕迹，因此 useEffect 提供了一种清除副作用的方式。,effect 与 clear effect 是一一对应的紧密关系。因此，我们可以定义一个回调函数由 effect 执行时返回，该函数就是 clear effect 函数。,clear effect 在下次 effect 执行之前执行，也会在组件销毁之前执行一次。,我们可以借助该特性实现一个防抖的案例。,例如我们要实现一个搜索框的功能。文字输入过程中会自动发起搜索请求。为了防止请求发送过于频繁，在高频输入时，不发送接口请求，如果超过了 500ms 下一次输入事件还没有发生，那么就自动请求一次。,实现代码如下：,我们在 effect 中定义了定时器，作为延迟操作：500ms 后执行请求逻辑。如果下一次 text 快速发生变化，clear effect 执行会清除掉上一次定义的定时器任务，那么请求逻辑就不会执行。,只有下一次 text 的改变超过了 500ms 时，定时器任务才会如期执行。,执行顺序为：,在学习和理解 effect 的含义时，我们知道 state 的变化引发 UI 重新渲染，UI 渲染完成之后会执行 effect。,然而在真实实践时，我们往往是知道自己要执行的副作用逻辑是什么，难的是需要我们自己去设计合理的 state。不合理的设计会让程序变得复杂。,现在我们要来实现下面的动画效果：,这个效果的实现，最重要的是对于几个状态的设计。,首先，我们需要用一个状态来表示第一段动画的执行与否 anime01。,其次，我们需要用一个状态来表示第二段动画的执行与否 anime02。,最后，我们也可以使用一个额外的状态来判断整个过程是否已经执行完毕 stoped。,在实现该逻辑中，我们只需要知道每一个运动的结束时间点，并修改对应的状态即可。,例如：第一段动画执行结束，修改 anime02 为true。,完整代码如下：,这个案例值得我们进一步思考，一方面是数据为什么需要使用 state 或者 ref. 另一方面是关于 effect 是否还有另外一个角度的思考。