脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React useEffect

React useEffect的理解与使用

 更新时间：2022年12月22日 10:42:13   作者：咸蛋超人l  
useEffect是react v16.8新引入的特性。我们可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三个函数的组合

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])

到此这篇关于React useEffect的理解与使用的文章就介绍到这了,更多相关React useEffect内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react实现页面水印效果的全过程

    react实现页面水印效果的全过程

    大家常常关注的是网站图片增加水印,而很少关注页面水印,其实这个需求也是比较常见的,比如公文系统、合同系统等,这篇文章主要给大家介绍了关于react实现页面水印效果的相关资料,需要的朋友可以参考下
    2021-09-09
  • React中super()和super(props)的区别小结

    React中super()和super(props)的区别小结

    本文主要介绍了React中super()和super(props)的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • react native环境安装流程

    react native环境安装流程

    React Native 是目前流行的跨平台移动应用开发框架之一。本文介绍react native环境安装流程及遇到问题解决方法，感兴趣的朋友一起看看吧
    2021-05-05
  • concent渐进式重构react应用使用详解

    concent渐进式重构react应用使用详解

    这篇文章主要为大家介绍了concent渐进式重构react应用的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • react-router-dom v6版本跳转路径的实现方法

    react-router-dom v6版本跳转路径的实现方法

    这篇文章主要介绍了react-router-dom v6版本跳转路径的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 详解React中函数式组件与类组件的不同

    详解React中函数式组件与类组件的不同

    React 函数式组件与类组件的主要区别在于它们的定义和声明方式以及它们之间的一些特性,所以本文就详细的给大家讲讲React中函数式组件与类组件有何不同,需要的朋友可以参考下
    2023-09-09
  • useEvent显著降低Hooks负担的原生Hook

    useEvent显著降低Hooks负担的原生Hook

    这篇文章主要为大家介绍了useEvent显著降低Hooks负担的原生Hook示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • React浅析Fragments使用方法

    React浅析Fragments使用方法

    这篇文章主要介绍了React Fragments使用方法，关于react Fragments,React中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点
    2022-12-12
  • js中自定义react数据验证组件实例详解

    js中自定义react数据验证组件实例详解

    我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中自定义react数据验证组件 ,需要的朋友可以参考下
    2018-10-10
  • 浅谈React高阶组件

    浅谈React高阶组件

    这篇文章主要介绍了浅谈React高阶组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论