社区编辑申请
注册/登录
重点来了,UseEffect如何让使用者在函数组件中执行副作用操作
开发 前端
useEffect 是一个难以掌握的知识点。许多人对它半知半解,因此他们觉得函数式组件不受控制。

作者 |这波能反杀丶

来源 |这波能反杀(ID:keepKilling)

当了二十多天废物,今天开始更新,让大家久等了。花了挺长的时间优化文章 UI 细节,进一步提高阅读体验,大家多多感受一下.

useEffect 是一个难以掌握的知识点。许多人对它半知半解,因此他们觉得函数式组件不受控制。

除了本身难以理解之外,React 还提供了一个类似的 hook:useLayoutEffect 来增加学习难度,对于新手来说,这可要了老命了。

许多朋友试图利用 class 语法中的生命周期来类比理解 useEffect,因为官方文档就是这么引导的,那么他们多半会陷入一些误区,因此,学习之前,大家需要明确的是,生命周期函数与 useEffect 是不同的。

要充分理解并使用该方法,你需要对闭包、同步、异步、事件循环等基础概念有清晰认知。

一、概念

useEffect 可以让使用者在函数组件中执行副作用操作。

那什么是副作用操作呢?

在 React 中,由 state 的变化导致 UI 发生变化的过程是正常操作,其他操作行为:例如数据请求、直接手动修改 DOM 节点、直接操作页面「修改页面标题等」、记录日志等都是副作用操作。

副作用操作是相对于操作 state 而言的。

每一次因为 state 的改变,都有一次对应副作用函数的执行时机。如果 state 多次改变,那么就有多次对应副作用的执行时机。

例如:我希望记录点击的次数。

该次数不仅要在页面上显示,也要在页面标题中显示。

我们就可以给出如下代码来实现需求。

import { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

在该例子中,修改页面标题的行为是副作用行为,因此我们可以直接使用 useEffect 来定义它。useEffect 的第一个参数为一个回调函数,该回调函数就是我们上面说的副作用函数「effect」,我们想要执行的副作用逻辑都写在该函数中。

二、语法

// 中括号表示参数可选
useEffect(effct[, deps])

useEffect 是 React 提供的 Hook,它能够帮助我们定义 effect 函数。

第一个参数就是副作用函数 effect。

第二个参数表示依赖项,是一个可选参数。当不传入该参数时,每次 UI 渲染 effect 函数都会执行。

但是大多数时候我们并不想任何 state 的变化都一定要执行 effect 函数,这个时候我们可以传入依赖项数组。使用时请确保依赖项数组中为 state/props 的值,表示 effect 只会响应依赖项中状态的变化。

如果你在 useEffect 中传入与 state 无关的数据,effect 不会响应它们。

只有当依赖项中是 state 发生变化时,effect 才会与之对应的执行。

不同的 state 数据变化通常对应不同的副作用操作。因此我们可以在函数组件中,定义多个 effect。

function Demo() {
const [count, setCount] = useState(0)
const [show, setShow] = useState(false)
useEffect(() => {
// do something
}, [count])
useEffect(() => {
// do other something
}, [show])
...
}

除此之外,我们还可以传入空数组作为依赖项,用于表示依赖项不会发生变化。因此,空数组对应的 effect,就只会在初始化时执行一次,以后就再也不会执行了。

我们通常利用这个特性完成一些初始化工作,例如请求页面数据。

const [list, setList] = useState(0);
// DOM渲染完成之后 effect 函数执行
useEffect(() => {
recordListApi().then(res => {
setList(res.data);
})
}, []);

三、清除副作用

有的时候,副作用函数 effect 执行会留下一些痕迹,因此 useEffect 提供了一种清除副作用的方式。

effect 与 clear effect 是一一对应的紧密关系。因此,我们可以定义一个回调函数由 effect 执行时返回,该函数就是 clear effect 函数。

useEffect(() => {
// dosomething
// 定义 clear effect 函数
return () => {
// clear something
}
}, [])

这里一定要注意该函数与 class 组件中的 componentWillUnmount 的区别,官方文档中的案例存在一定的误导性。如果 deps 传入空数据,则两者是类似的,否则他们完全不一样,effect 与 clear effect 都有可能执行多次。

clear effect 在下次 effect 执行之前执行,也会在组件销毁之前执行一次。

我们可以借助该特性实现一个防抖的案例。

例如我们要实现一个搜索框的功能。文字输入过程中会自动发起搜索请求。为了防止请求发送过于频繁,在高频输入时,不发送接口请求,如果超过了 500ms 下一次输入事件还没有发生,那么就自动请求一次。

实现代码如下:

import { useEffect, useState } from 'react'
export default function EffectDemo() {
const [text, setText] = useState('')
useEffect(() => {
let timer = setTimeout(() => {
console.log('发送搜索请求')
}, 500)
return () => {
console.log('清除定时器')
clearTimeout(timer)
}
}, [text])
return (
<div>
<input type="text" placeholder='请输入内容...' onChange={(e) => setText(e.target.value)} />
</div>
)
}

我们在 effect 中定义了定时器,作为延迟操作:500ms 后执行请求逻辑。如果下一次 text 快速发生变化,clear effect 执行会清除掉上一次定义的定时器任务,那么请求逻辑就不会执行。

只有下一次 text 的改变超过了 500ms 时,定时器任务才会如期执行。

执行顺序为:

四、案例

在学习和理解 effect 的含义时,我们知道 state 的变化引发 UI 重新渲染,UI 渲染完成之后会执行 effect。

然而在真实实践时,我们往往是知道自己要执行的副作用逻辑是什么,难的是需要我们自己去设计合理的 state。不合理的设计会让程序变得复杂。

现在我们要来实现下面的动画效果:

  1. 点击红色画布,白色方块执行第一段动画,并显示执行日志。
  2. 执行完后紧接着执行第二段动画回到圆点,并显示执行日志。
  3. 在白色方块执行动画的过程中点击事件无效:点击不影响动画的执行,结束之后重新生效。

这个效果的实现,最重要的是对于几个状态的设计。

首先,我们需要用一个状态来表示第一段动画的执行与否 anime01。

其次,我们需要用一个状态来表示第二段动画的执行与否 anime02。

最后,我们也可以使用一个额外的状态来判断整个过程是否已经执行完毕 stoped。

重点思考该状态的特性,与存在的必要性。

在实现该逻辑中,我们只需要知道每一个运动的结束时间点,并修改对应的状态即可。

例如:第一段动画执行结束,修改 anime02 为true。

完整代码如下:

import { useState, useRef, useEffect } from 'react';
// @ts-ignore
import anime from 'animejs';
import './style.scss';
export default function AnimateDemo() {
const [anime01, setAnime01] = useState(false);
const [anime02, setAnime02] = useState(false);
const element = useRef<HTMLDivElement>(null);
// 是否已经停下来了
const stoped = useRef(true)
useEffect(() => {
anime01 && animate01();
anime02 && animate02();
}, [anime01, anime02]);
function animate01() {
anime({
targets: element.current,
translateX: 400,
backgroundColor: '#FF8F42',
borderRadius: ['0%', '50%'],
complete: () => {
setAnime01(false)
setAnime02(true)
}
})
}
function animate02() {
anime({
targets: element.current,
translateX: 0,
backgroundColor: '#FFF',
borderRadius: ['50%', '0%'],
easing: 'easeInOutQuad',
complete: () => {
setAnime02(false);
stoped.current = true
}
})
}
function clickHandler() {
if (stoped.current) {
stoped.current = false
setAnime01(true);
}
}
return (
<div className="container" onClick={clickHandler}>
<div className="el" ref={element} />
{anime01 && <div>第一段动画执行中</div>}
{anime02 && <div>第二段动画执行中</div>}
</div>
)
}

这个案例值得我们进一步思考,一方面是数据为什么需要使用 state 或者 ref. 另一方面是关于 effect 是否还有另外一个角度的思考。

责任编辑:姜华 来源: 这波能反杀
相关推荐

2022-06-05 21:09:47

Python办公自动化

2022-06-20 22:37:25

Linux操作系统命令

2022-06-15 11:51:14

Vue3开发避坑

2022-06-14 23:34:10

Linux安全服务器

2022-06-23 09:22:57

Vue技巧前端

2022-06-27 17:46:53

PythonFlask

2022-06-27 17:58:30

Pulsar函数Serverless

2022-06-29 09:19:09

静态代码C语言c代码

2022-06-10 07:45:09

CentOS国产操作系统

2022-06-27 19:01:04

Python应用程序数据

2022-06-09 21:34:41

2022-06-15 08:21:49

Linux运维工程师

2022-06-20 13:34:46

漏洞网络攻击

2022-07-01 05:47:19

PyCharm插件开发

2022-06-22 09:56:19

PythonMySQL数据库

2022-05-05 09:02:24

Go函数调用栈

2022-06-23 12:43:36

区块链加密货币

2022-06-21 09:02:49

python技巧

2022-07-01 18:24:36

勒索软件病毒网络攻击

2022-06-16 15:42:16

攻击面管理ASM

同话题下的热门内容

手把手教你用装饰器扩展 Python 计时器IOC-Golang 的 AOP 原理与应用Vue 里,多级菜单要如何设计才显得专业?分析了 700 万份工作需求,市场需求最高的八种编程语言是这些Vue 2.7 正式发布,代号为 Naruto手把手教你实现一个 Python 计时器2022 年编程语言趋势:Swift、Kotlin 热度持续增长,收入最高的五种语言竟是它们分布式事务(Seata) 四大模式详解

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号