关于useEffect执行两次的问题及解决_React_脚本之家
脚本之家
服务器常用软件
手机版
关注微信
快捷导航
软件下载
android
MAC
驱动下载
字体下载
DLL
源码下载
PHP
ASP.NET
ASP
JSP
软件编程
C#
JAVA
C 语言
Delphi
Android
网络编程
JavaScript
在线工具
CSS格式化
JS格式化
Html转化为Js
数据库
MYSQL
MSSQL
oracle
DB2
MARIADB
CMS
PHPCMS
DEDECMS
帝国CMS
WordPress
常用工具
PHP开发工具
python
Photoshop
必备软件
网站首页
网页制作
脚本专栏
脚本下载
服务器
电子书籍
操作系统
网站运营
平面设计
其它
媒体动画
电脑基础
硬件教程
网络安全
YUI.Ext相关
prototype
jquery
AngularJS
json
lib_js
js面向对象
extjs
Mootools
Seajs
dojo
vue.js
backbone.js
React
您的位置：
首页
javascript类库
→ useEffect执行两次的问题
关于useEffect执行两次的问题及解决
 更新时间：2022年09月14日 10:42:46   作者：小兔子乖乖_C  
这篇文章主要介绍了关于useEffect执行两次的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
useEffect执行两次问题
父组件里面 
子组件里面
react使用useEffect及踩坑
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}/>
 }
useEffect时reactHook中最重要，最常用的hook之一。
useEffect相当于react中的什么生命周期呢？
这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？），开个玩笑这个问题并不难回答，下面是react官方的原话：
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
componentDidMount
组件挂载
componentDidUpdate
组件更新
componentWillUnmount
组件将要摧毁
useEffect需要传递两个参数，第一个参数是逻辑处理函数，第二个参数是一个数组
用法
useEffect(() => {
/** 执行逻辑 */
},[])
一、第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行
二、第二个参数可以不传，不会报错，但浏览器会无线循环执行逻辑处理函数。
})
三、第二个参数如果只传一个空数组，逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ，不就是相当于 componentDidMount
四、第二个参数如果不为空数组，如下
const [a, setA] = useState(1);
const [b, setB] = useState(2);
},[a,b])
逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和 componentDidUpdate 的结合
五、useEffect第一个参数可以返回一个回调函数，这个回调函数将会在组件被摧毁之前和再一次触发更新时，将之前的副作用清除掉。这就相当于componentWillUnmount。
useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅（计时器，或者递归循环）。在组件被摧毁之前，或者依赖数组的元素更新后，应该将这些订阅也给摧毁掉。
比如以下的情况（没有去除计时器，增大不必要的开销和代码风险) 
const [time, setTime] = useState(0)
    const InterVal = setInterval(() => {
        setTime(time + 1)
    },1000)
利用第五点，在组件被摧毁前去除计时器。
    return () => {
           clearInterval(InterVal )
       }
1、useEffect执行函数被循环执行。
出现这种情况可能有两种原因。
没传第二个参数
2、你在useEffect执行函数里面改变了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
    })
/** 当组件挂载时执行一次changeA */
changeA ()
/**当changeA执行却没有打印 a*/
console.log(a)
是因为changeA没有真正的改变a在栈中的值（地址的值），只是改变了a在堆中的值。
useEffect监测不到堆中值得变化，所有引用类型数据都应该注意这一点。
解决的办法：
    const newA = {...old}
    newA .b = 'yx'
    return newA 
/**当changeA执行打印  {b:'yx',c:'18'}  */
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
React useEffect异步操作常见问题小结
关于 React 中 useEffect 使用问题浅谈
如何解决React useEffect钩子带来的无限循环问题
useEffect
执行
两次
相关文章
React SSR 中的限流案例详解
这篇文章主要介绍了React SSR 之限流,React SSR 毕竟涉及到了服务端，有很多服务端特有的问题需要考虑，而限流就是其中之一，本文会通过一个简单的案例来说明，为什么服务端需要进行限流，需要的朋友可以参考下
2022-07-07
react中将html字符串渲染到页面的实现方式
这篇文章主要介绍了react中将html字符串渲染到页面的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
一文掌握React 组件树遍历技巧
这篇文章主要为大家介绍了React 组件树遍历技巧的掌握，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
react使用websocket实时通信方式
这篇文章主要介绍了react使用websocket实时通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React注册倒计时功能的实现
这篇文章主要介绍了React注册倒计时功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
react之umi配置国际化语言locale的踩坑记录
这篇文章主要介绍了react之umi配置国际化语言locale的踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-02-02
详解React中常见的三种路由处理方式选择
这篇文章主要为大家详细介绍了React中常见的三种路由处理方式该如何选择,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2024-01-01
React开发进阶redux saga使用原理详解
这篇文章主要为大家介绍了React开发进阶redux saga使用原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
详解React中setState回调函数
这篇文章主要介绍了详解React中setState回调函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
使用React实现一个简单的待办任务列表
这篇文章主要给大家介绍了使用React和Ant Design库构建的待办任务列表应用,它包含了可编辑的表格,用户可以添加、编辑和完成任务,以及保存任务列表数据到本地存储,文中有相关的代码示例,需要的朋友可以参考下
2023-08-08
最新评论
大家感兴趣的内容
详解React中传入组件的props改变时更新组件的几种实现
VSCode配置react开发环境的步骤
vue3中获取ref元素的几种方式总结
react-redux中connect的装饰器用法@conn
ReactNative 之FlatList使用及踩坑封装总结
基于React路由跳转的几种方式
react路由守卫的实现(路由拦截)
react中Suspense的使用详解
详解React Native开源时间日期选择器组件(reac
10
React useEffect的理解与使用
最近更新的内容
react如何实现筛选条件组件
React 原理详解
react-native使用leanclound消息推送的方法
ReactJS应用程序中设置Axios拦截器方法demo
reactjs学习解决unknown at rule&n
React引入antd-mobile+postcss搭建移动端
详解一个基于react+webpack的多页面应用配置
React之echarts-for-react源码解读
React Router 如何使用history跳转的实现
react16.8.0以上MobX在hook中的使用方法详解
常用在线小工具
关于我们
广告合作
联系我们
免责声明
网站地图
投诉建议
在线投稿
©CopyRight 2006-2024 JB51.Net Inc All Rights Reserved. 脚本之家 版权所有