react中副作用函数(useEffect)详解

先简单说一下常见的useEffect使用方式三种

useEffect(() => {// 副作用函数的内容
})  每次更新之后都要执行
--------------------
useEffect(() => {// 副作用函数的内容
}, [])
初始化页面时 只执行第一次
--------------------
useEffect(() => {// 副作用函数的内容
}, [依赖项]) //依赖项可以有多个
1 初始执行一次 2 每次依赖项的值变化时执行

这是我们常用的方法

重点来了:

1. useEffect 只能是一个同步函数，不能使用 async

如果需要发送请求或者其他异步操作,需要额外加一个箭头函数包裹住

useEffect(()={
async () => {const res = awiat xxx()}
}, [])

2. 副作用函数的返回值

useEffect 函数是可以return的格式是下图,他可以返回一个函数,这个函数称为清理函数

useEffect(() => {// 副作用函数的内容return 副作用函数的返回值
}, [])

清理函数的执行时机： 清理函数会在组件卸载时以及下一次副作用函数调用之前执行

结合依赖项:上图中的清理函数只会在组件被卸载时调用,因为他的依赖项是空,只会在页面初始化的时候执行副作用函数不会执行清理函数,当组件卸载时执行清理函数

所以我们可以通过这一特性来模拟 componentWillUnmount 这个钩子函数,组件被销毁时执行

useEffect(()=>{return ()=>{// 做清理工作}
}, [])

react中副作用函数(useEffect)详解相关推荐

25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
C++中substr()函数用法详解
C++中substr()函数用法详解原型: string substr (size_t pos = 0, size_t len = npos) const; 返回一个新构造的string对象,其值初 ...
c++ memset 语言_C++中memset函数用法详解
本文实例讲述了C++中memset函数用法.分享给大家供大家参考,具体如下: 功能: 将s所指向的某一块内存中的每个字节的内容全部设置为ch指定的ASCII值,块的大小由第三个参数指定,这个函数通常 ...
php dump函数详解,php中var_dump()函数的详解说明
本文章给大家全面的介绍一下关于php中var_dump()函数用法详解,大家可参考参考. var_dump()void var_dump ( mixed expression [, mixed exp ...
C语言结构体中定义函数指针详解
C语言结构体中定义函数指针详解结构体指针函数应用场景之一--驱动程序编写结构体的一些基本用法形式1:先定义结构体类型,再定义变量形式2:在定义类型的同时定义变量形式3:直接定义变量,用无名结 ...
C++中发声函数Beep详解
一.目的 1.想知道Beep是什么二.参考 1.C++中发声函数Beep详解 https://blog.csdn.net/v1t1p9hvbd/article/details/71523218 ①总 ...
python中setattr()函数用法详解
setattr() 函数对应函数 getattr(),用于设置属性值,该属性不一定是存在的. getattr()用法详见博文:python中getattr()函数用法详解_IT之一小佬的博客-CSDN ...
python中index函数_详解python中的index函数用法
1.函数的创建 def fun(): #定义 print('hellow') #函数的执行代码 retrun 1 #返回值 fun() #执行函数 2.函数的参数普通参数 :要按照顺序输入参数 de ...
python中squeeze函数_详解pytorch中squeeze()和unsqueeze()函数介绍
squeeze的用法主要就是对数据的维度进行压缩或者解压. 先看torch.squeeze() 这个函数主要对数据的维度进行压缩,去掉维数为1的的维度,比如是一行或者一列这种,一个一行三列(1,3)的 ...

react中副作用函数(useEffect)详解

1. useEffect 只能是一个同步函数，不能使用 async

2. 副作用函数的返回值

react中副作用函数(useEffect)详解相关推荐

最新文章

热门文章