关于useEffect执行两次的问题及解决

更新时间：2022年09月14日 10:42:46 作者：小兔子乖乖_C

这篇文章主要介绍了关于useEffect执行两次的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

useEffect执行两次问题

在useEffect第二个参数变化的时候，需要在父组件里面更改这个值的地方加一个判断，如果有值则设置为空，else更新这个值。useEffect第二个值可以是表达式

父组件里面

//授权树展示
    const handleRoleModalVisible = (RoleModelVisibel: boolean, record?: any) => {
        setRoleModalVisible(RoleModelVisibel);
        // console.log(record)
        if(RoleModelVisibel==undefined){
            setroleAuth(undefined)
        }else{
            setroleAuth(record)
        }
    };

子组件里面

 const {roleAuth, treeData, roleModalVisible, handleRoleModalVisible} = props;
    useEffect(() => {
        queryTreeId({role_id: roleAuth.roleId}).then(res => {
            setCheckedKeys(res.data.content)
            setSelectedKeys(res.data.content)
        })
    }, [roleAuth!==undefined])

在最后

 {
     roleAuth&&<Authority roleAuth={roleAuth}  treeData={treeData}
     roleModalVisible={roleModalVisible} handleRoleModalVisible={handleRoleModalVisible}/>
 }

react使用useEffect及踩坑

useEffect 介绍

useEffect时reactHook中最重要，最常用的hook之一。

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

这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？），开个玩笑这个问题并不难回答，下面是react官方的原话：

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

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

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

用法

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

重要理解

一、第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行

二、第二个参数可以不传，不会报错，但浏览器会无线循环执行逻辑处理函数。

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

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

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

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

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 执行逻辑 */
},[a,b])

逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和 componentDidUpdate 的结合

五、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常见跳坑

1、useEffect执行函数被循环执行。

出现这种情况可能有两种原因。

没传第二个参数

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

2、你在useEffect执行函数里面改变了useEffect监测的变量

const [a, setA] = useState(1);
useEffect(() => {
/** 执行逻辑 */
setA(a + 1)
},[a])

解决的方法不要在useEffect第一参数执行函数中去改变第二参数依赖元素的地址的值。当依赖元素的地址的值发生改变，又会执行一次执行函数，这不是无限循环么。

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

是因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。

useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。

解决的办法：

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中value与defaultValue的区别及说明
这篇文章主要介绍了react中value与defaultValue的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
React Native性能优化红宝书方案详解
React Native 是Facebook在React.js Conf2015推出的开源框架,使用React和应用平台的原生功能来构建Android和iOS应用,这篇文章主要介绍了React Native性能优化红宝书,需要的朋友可以参考下
2024-06-06
聊聊ant design charts 获取后端接口数据展示问题
今天在做项目的时候遇到几个让我很头疼的问题，一个是通过后端接口成功访问并又返回数据，但拿不到数据值。其二是直接修改state中的data，console中数组发生变化但任然数据未显示，这篇文章主要介绍了ant design charts 获取后端接口数据展示,需要的朋友可以参考下
2022-05-05
React受控组件与非受控组件详细介绍
具体来说这是一种react非受控组件，其状态是在input的react内部控制，不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识，感兴趣的朋友一起看看吧
2022-09-09
React中阻止事件冒泡的问题详析
这篇文章主要给大家介绍了关于React中阻止事件冒泡问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用React具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
30分钟精通React今年最劲爆的新特性——React Hooks
这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
webpack入门+react环境配置
webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换再到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤。
2017-02-02
Zustand介绍与使用 React状态管理工具的解决方案
本文主要介绍了Zustand,一种基于React的状态管理库,Zustand以简洁易用、灵活性高及最小化原则等特点脱颖而出,旨在提供简单而强大的状态管理功能
2024-10-10
react使用websocket实时通信方式
这篇文章主要介绍了react使用websocket实时通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
react项目引入scss的方法
这篇文章主要介绍了react项目引入scss的方法,本文给大家介绍了React pwa的配置方法，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04