IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【React】useEffect使用详解 -> 正文阅读

[JavaScript知识库]【React】useEffect使用详解

useEffect 介绍

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做
componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

  • componentDidMount 组件挂载
  • componentDidUpdate 组件更新
  • componentWillUnmount 组件将要摧毁

使用方法
情况一:

  • useEffect需要传递两个参数,第一个参数是逻辑处理函数,第二个参数是一个数组
    代码如下:
useEffect(() => {
/** 执行逻辑 */
},[])

情况二:

  • 第二个参数存放变量,当数组存放变量发生改变时,第一个参数,逻辑处理函数将会被执行
  • 第二个参数可以不传,不会报错,但浏览器会无限循环执行逻辑处理函数。
    代码如下:
useEffect(() => {
/** 执行逻辑 */
})

情况三:

  • 第二个参数如果只传一个空数组,逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ,等价于 componentDidMount
    代码如下:
useEffect(() => {
/** 执行逻辑 */
},[])

情况四:

  • 第二个参数如果不为空数组,依赖指定参数触发使用
  • 逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和componentDidUpdate 的结合
const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 执行逻辑 */
},[a,b])

情况五:

  • useEffect第一个参数可以返回一个回调函数,这个回调函数将会在组件被摧毁之前和再一次触发更新时,将之前的副作用清除掉。这就相当于componentWillUnmount。
  • useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅(计时器,或者递归循环)。在组件被摧毁之前,或者依赖数组的元素更新后,应该将这些订阅也给摧毁掉。
    比如以下的情况(没有去除计时器,增大不必要的开销和代码风险)
const [time, setTime] = useState(0)

useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
},[])

处理在组件被摧毁前去除计时器

const [time, setTime] = useState(0)

useEffect(() => {
	const InterVal = setInterval(() => {
		setTime(time + 1)
	},1000)
	return () => {
   		clearInterval(InterVal )
   	}
},[])

特殊情况处理

useEffect监测不到依赖数组元素的变化。

只有一种可能,依赖数组元素的地址的值根本就没变,
原因:因为changeA没有真正的改变a在栈中的值(地址的值),只是改变了a在堆中的值。
useEffect监测不到堆中值得变化,所有引用类型数据都应该注意这一点。

代码示例:
const [a, setA] = useState({
b: 'dx',
c: '18',
})

const changeA = () => {
	setA((old) => {
	old.b = 'yx'
	return old
	})
}

useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])

/**当changeA执行却没有打印 a*/
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])

解决的办法

const [a, setA] = useState({
b: 'dx',
c: '18',
})

const changeA = () => {
	setA((old) => {
	const newA = {...old}
	newA .b = 'yx'
	return newA 
	})
}

useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])

/**当changeA执行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-12-25 10:59:18  更:2022-12-25 11:00:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年1日历 -2025/1/11 17:45:54-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码