脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 配置@符号绝对路径配置和绝对路径没有提示的问题

    react-native 配置@符号绝对路径配置和绝对路径没有提示的问题

    本文主要介绍了react-native 配置@符号绝对路径配置和绝对路径没有提示的问题,文中通过图文示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • react中的ajax封装实例详解

    react中的ajax封装实例详解

    这篇文章主要介绍了react中的ajax封装实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下
    2017-10-10
  • React构建组件的几种方式及区别

    React构建组件的几种方式及区别

    这篇文章主要介绍了React构建组件的几种方式及区别，组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念来实现开发的模式文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-08-08
  • React 添加引用路径时如何使用@符号作为src文件

    React 添加引用路径时如何使用@符号作为src文件

    这篇文章主要介绍了React 添加引用路径时如何使用@符号作为src文件,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-06-06
  • React中mobx和redux的区别及说明

    React中mobx和redux的区别及说明

    这篇文章主要介绍了React中mobx和redux的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06
  • React中的Refs属性你来了解吗

    React中的Refs属性你来了解吗

    这篇文章主要为大家详细介绍了的React Refs属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • create-react-app中添加less支持的实现

    create-react-app中添加less支持的实现

    这篇文章主要介绍了react.js create-react-app中添加less支持的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

    详解React-Native解决键盘遮挡问题（Keyboard遮挡问题）

    本篇文章主要介绍了React-Native解决键盘遮挡问题（Keyboard遮挡问题），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 基于React封装一个验证码输入控件

    基于React封装一个验证码输入控件

    邮箱、手机验证码输入是许多在线服务和网站常见的安全验证方式之一,本文主要来和大家讨论一下如何使用React封装一个验证码输入控件,感兴趣的可以了解下
    2024-03-03
  • react组件多次渲染问题的解决

    react组件多次渲染问题的解决

    本文主要介绍了react组件多次渲染问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07

最新评论