脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 native仿微信PopupWindow效果的实例代码

    react native仿微信PopupWindow效果的实例代码

    本篇文章主要介绍了react native仿微信PopupWindow效果的实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • react无限滚动组件的实现示例

    react无限滚动组件的实现示例

    本文主要介绍了react无限滚动组件的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • React模仿网易云音乐实现一个音乐项目详解流程

    React模仿网易云音乐实现一个音乐项目详解流程

    这篇文章主要介绍了React模仿网易云音乐实现一个音乐项目的详细流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • ReactNative实现的横向滑动条效果

    ReactNative实现的横向滑动条效果

    本文介绍了ReactNative实现的横向滑动条效果,本文结合示例代码给大家介绍的非常详细,补充介绍了ReactNative基于宽度变化实现的动画效果,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • react脚手架如何配置less和ant按需加载的方法步骤

    react脚手架如何配置less和ant按需加载的方法步骤

    这篇文章主要介绍了react脚手架如何配置less和ant按需加载的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • React学习笔记之条件渲染（一）

    React学习笔记之条件渲染（一）

    条件渲染在React里就和js里的条件语句一样。下面这篇文章主要给大家介绍了关于React学习记录之条件渲染的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-07-07
  • 浅谈react受控组件与非受控组件(小结)

    浅谈react受控组件与非受控组件(小结)

    本篇文章主要介绍了浅谈react受控组件与非受控组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • hooks写React组件的5个注意细节详解

    hooks写React组件的5个注意细节详解

    这篇文章主要为大家介绍了hooks写React组件的5个需要注意的细节详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • 浅谈react新旧生命周期钩子

    浅谈react新旧生命周期钩子

    所谓的生命周期就是指某个事物从开始到结束的各个阶段,本文主要介绍了浅谈react新旧生命周期钩子,具有一定的参考价值,感兴趣的可以了解一下
    2023-12-12
  • React实现点击删除列表中对应项

    React实现点击删除列表中对应项

    本文主要介绍了React 点击删除列表中对应项的方法。具有一定的参考价值，下面跟着小编一起来看下吧
    2017-01-01

最新评论