关于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配置antd按需加载的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
React应用中对接流式接口通常涉及到处理实时数据传输,本文就来介绍一下React 对接流式接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
这篇文章主要为大家介绍了React官方团队出手，补齐原生Hook短板闭包陷阱的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
很多小伙伴反馈React ant 点击导航条闪烁,没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果,下面给大家分享解决方法,感兴趣的的朋友跟随小编一起看看吧2024-04-04
ReactHook使用useState更新变量后,如何拿到变量更新后的值
这篇文章主要介绍了ReactHook使用useState更新变量后,如何拿到变量更新后的值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在开发项目的时候,从服务端获取到数据列表后,展示给用户看,需要实现数据自动滚动效果,怎么实现呢,下面小编给大家分享react实现列表滚动组件功能实现代码,感兴趣的朋友一起看看吧2023-09-09
这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性，注意：一定不能不能忘了key，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要为大家介绍了React Ref Callback使用场景最佳实践详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React合成事件原理及实现(React18和React16)
本文主要介绍了React合成事件原理及实现,包含React18和React16两种版本,具有一定的参考价值,感兴趣的可以了解一下2025-02-02
这篇文章主要介绍了React中嵌套组件与被嵌套组件的通信过程，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
最新评论