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(() => {/** 执行逻辑 */
})
解决的方法
useEffect(() => {/** 执行逻辑 */
},[])
- 你在useEffect执行函数里面改变了useEffect监测的变量
const [a, setA] = useState(1);
useEffect(() => {/** 执行逻辑 */
setA(a + 1)
},[a])
解决的方法 不要在useEffect第一参数执行函数中去改变第二参数依赖元素的地址的值。当依赖元素的地址的值发生改变,又会执行一次执行函数,这不是无限循环么。
2、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 使用 useEffect 及踩坑相关推荐
- react开发公众号踩坑日志
最近在用react开发一个公众号产品.以前没有过开发公众号的经验,在这里记录一下过程中踩过的坑. 这个项目是前后端开发的.本篇文章只站在前端的视角,希望给大家一个参考 一.授权回调 微信授权过程 进入 ...
- React Hook基本使用踩坑指南
React因为提倡函数式编程,所以提出了Hook思想来增强函数组件的功能,以此来替代基于Class的组件.但是我们有可能从基于Class这样的实例化组件转向函数组件时思想还没有完全转过来,还是用基于实 ...
- truffle unbox react 初始化踩坑
truffle unbox react 初始化踩坑 1.文件位置引起的错误 一定要在package.json 所在文件夹下npm run start ,新版本一定要进入client文件夹再npm ru ...
- React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...
- 丰田项目踩坑手记(REACT)
丰田项目踩坑手记(REACT) 路由配置的时候:要引入hash路由不是browswer那个 路由参考网址:react-guide.github.io/react-route- 路由网址:reacttr ...
- eslint 无法格式化ts_vscode-eslint的踩坑实践--typescript无法格式化
Apple iPhone 11 (A2223) 128GB 黑色 移动联通电信4G手机 双卡双待 4999元包邮 去购买 > vscode-eslint的踩坑实践--typescript无法格式 ...
- Next.js踩坑入门系列(七) —— 其他相关知识
Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) ...
- npm ERR! code ERR_STREAM_WRITE_AFTER_END npm install 报错实力踩坑npm,自从用了npm之后项目构建和插件管理确实方便了很多,但也是被坑的不要不要的
实力踩坑npm,自从用了npm之后项目构建和插件管理确实方便了很多,但也是被坑的不要不要的.由于平时只是用用,并没有深入了解node的npm,所以遇到问题都比较棘手,能够查到的资料也不多.阐述以下我遇 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
最新文章
- (转)分享一个SQLSERVER脚本(计算数据库中各个表的数据量和每行记录所占用空间)...
- 首发:深度学习测试题中英对照版
- 让 .NET 程序 Autorun
- [CQOI2009]叶子的染色
- python3 urllib3文档_python urllib3
- 点到曲线的距离_如何从“圆锥”曲线到圆锥曲线
- Nginx支持WebSocket反向代理-学习小结
- 64位linux系统安装32位应用程序
- Win7-VirsualBox下学习Ubuntu--初识ubuntu
- HTML网页设计结课作业 榆林子州 HTML5响应式旅游景区网站模板
- Kaggle泰坦尼克预测(完整分析)
- Python中的盆地跳跃(Basin Hopping)优化
- IE 获取不到元素 img标签层级默认变高
- The Apache Tomcat Native library which allows using OpenSSL was not found on the java.library.path
- 学生学籍管理系统_学生登陆系统查询与修改信息
- 计算机图形学空间曲线,课程追忆之《计算机图形学》【曲线曲面篇】
- 洛谷P1080 国王游戏(贪心)
- 吴恩达卷积神经网络 笔记,吴恩达 深度神经网络
- java计算机毕业设计东理咨询交流论坛源码+数据库+系统+lw文档+部署
- 【电力系统分析】同步发电机