关于生命周期 useEffect 会执行函数被循环执行

useEffect 介绍
useEffect时reactHook中最重要,最常用的hook之一。

useEffect相当于react中的什么生命周期呢?

我们都知道生命周期的初始化,更新,卸载,但是他们的名字太长很区分,及比如我有时候就会记混。但是useEffect很好的帮助解决了这个办法,只需要掌握useEffect的用法就行了。

这个问题在react官网中有过介绍,在使用的过程中,容易被忽略,下面是react官方的原话:
如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

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

useEffect用法:

useEffect需要传递两个参数,第一个参数是逻辑处理函数,第二个参数是一个数组。  

坑: 当useEffect 不传值时,会执行函数被循环执行;

 解决办法:传一个空数组。

useEffect(() => {
/** 执行逻辑 */
},[])

注意:
一、第二个参数存放变量,当数组存放变量发生改变时,第一个参数,逻辑处理函数将会被执行
二、useEffect不传递第二个参数会导致每次渲染都会运行useEffect,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。

useEffect(() => {
/** 执行逻辑 */
})


三、第二个参数如果只传一个空数组,逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ,就是相当于 componentDidMount。

useEffect(()=>{undefined
          
},[])//仅在挂载和卸载的时候执行

四、第二个参数如果不为空数组,如下:

useEffect(()=>{
console.log(count)
}
,[count])//count更新时执行
  • 6
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值