这一次，彻底搞懂useEffect

什么是useEffect?

让函数型组件拥有处理副作用的能力，类似生命周期函数。

1. useEffect执行时机

可以把useEffect看做componentDidMount,componentDidUpdate,componentWillUnmount这三个函数的组合。

当做componentDidMount和componentDidUpdate的时候

function App() {const [count,setCount] = useState(0);// 组件挂载完成之后 或 组件数据更新完成之后 执行useEffect(() => {console.log('组件挂载完成之后 或 组件数据更新完成之后 执行');})return (<div>{count}<button onClick={() => setCount(count + 1)}>+1</button></div>)
}

仅当做comonentDidMount的时候

useEffect(() => {console.log('仅当做componentDidMount');
},[])

当做componentWillunmount的时候(注意：这里不是仅当做componentWillunmount)

useEffect(() => () => {console.log('当做componentWillUnmount');
})

2. useEffect的使用方法示例

为window对象添加滚动事件。（挂载完成后绑定事件，卸载组件后解除绑定）

function App() {function onScroll() {console.log('监听到页面发生滚动了');}useEffect(() => {window.addEventListener('scroll',onScroll);return () => {// 卸载组件时解除对事件的绑定window.removeEventListener('scroll',onScroll);}})return (<div>App </div>)
}

设置定时器让count数值每隔一秒增加1。

function App() {const [count,setCount] = useState(0);useEffect(() => {const timeId = setInterval(() => {setCount(count => count + 1); },1000)return () => {clearInterval(timeId);}},[])return (<div><h1>当前求和为：{count}</h1> </div>)
}

3. useEffect解决的问题

将一组相干的业务逻辑归置到了同一个副作用函数中.
简化重复代码,使组件内部代码更加清晰.

4：useEffect的第二个参数

只有指定数据发生变化的时候才触发effect

useEffect(() => {document.title = count;
}, [count])

5：useEffect结合异步函数

在useEffect中直接使用async和await是会报错的，推荐使用立即执行函数来包裹异步函数。

function getData() {return new Promise(resolve => {resolve({msg: 'Hello'})})
}
function App() {useEffect(() => {(async function () {const result = await getData();console.log(result);})()},[])return (<div>App</div>)
}

参考文献

官方文档

这一次，彻底搞懂useEffect相关推荐

zhs16gbk对应mysql_[Oracle] 彻底搞懂Oracle字符集
基本概念字符集(Character set):是一个系统支持的所有抽象字符的集合.字符是各种文字和符号的总称,包括各国家文字.标点符号.图形符号.数字等.常见的字符集有ASCII,ZHS16GB231 ...
面试必备|带你彻底搞懂Python生成器
2019年人工智能系统学: https://edu.csdn.net/topic/ai30?utm_source=ai100_bw 作者 | Rocky0429 转载自 Python空间(ID:Dev ...
20分钟教你搞懂Git！
Git 是最流行的版本管理工具,也是程序员必备的技能之一.本文就来教你 20 分钟搞懂 Git! 以下为译文: 尽管每天你都会用到Git,但也有可能搞不懂它的工作原理.为什么Git可以管理版本?基本命 ...
搞懂机器学习的常用评价指标！
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货作者:陈安东,湖南大学,Datawhale成员我与评价指标的首次交锋是 ...
一文搞懂结构体的定义及实际使用
大家好,我是无际,无实战不理论. 今天给大家讲一下结构体. 大家可能很好奇,为什么这种文章教程泛滥了,我还要拿出来讲. 相信无际的铁粉都知道,我分享的干货和经验出发点是实际产品应用. 脱离产品你所学的 ...
想要彻底搞懂“异地多活”，看完这篇就够了
在软件开发领域,「异地多活」是分布式系统架构设计的一座高峰,很多人经常听过它,但很少人理解其中的原理. 异地多活到底是什么?为什么需要异地多活?它到底解决了什么问题?究竟是怎么解决的? 这些疑问,想必 ...
这一次，你能彻底搞懂 Flink！
近年来,AI 场景发展得如火如荼,同时其计算规模也越来越大.这也让专注于数据处理的 Flink 有了较大的发展空间.Flink作为在大数据生态里实时处理的一个新框架,在一定程度上也有一定的难度. Fl ...
C语言重点——指针篇（一篇让你完全搞懂指针）
C语言重点--指针篇(一篇让你完全搞懂指针) 一. 前言 C语言是比较偏底层的语言,为什么他比较偏底层,就是因为他的很多操作都是直接针对内存操作的. 这篇我们就来讲解C语言的一大特点,也是难点,指针和 ...
C++搞懂深拷贝初始化=与赋值（运算符重载）=的区别
C++搞懂深拷贝初始化=与赋值(运算符重载)=的区别 C++构造函数用=与()不完全一样,注意使用=时c++中临时变量不能作为非const的引用参数,不论是=运算符重载还是构造函数,否则可能出现以下错 ...

这一次，彻底搞懂useEffect

什么是useEffect?

1. useEffect执行时机

2. useEffect的使用方法示例

3. useEffect解决的问题

4：useEffect的第二个参数

5：useEffect结合异步函数

参考文献

这一次，彻底搞懂useEffect相关推荐

最新文章

热门文章