当前位置:网站首页>Useeffect, triggered when function components are mounted and unloaded
Useeffect, triggered when function components are mounted and unloaded
2022-07-06 16:14:00 【Dream height 1.8 meters】
1 With no arguments
It is executed after the first rendering and after each update
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
const [number, setNumber] = React.useState(0); React.useEffect(() => {
console.log(' Trigger useEffect' + number); }); return <button onClick={
() => setNumber(number + 1)}> Click on {
number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
Each update , Will trigger useEffect
2 With parameters
You can send more than one [param1,param2,param3....]
Execute when the specified parameter changes
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
const [number, setNumber] = React.useState(0); const [change, setChange] = React.useState(0); React.useEffect(() => {
console.log(' Trigger useEffect' + number); }, [change]); return [<button onClick={
() => setNumber(number + 1)}>number{
number}</button>, <button onClick={
() => setChange(change + 1)}>change{
change}</button>] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
Only change When it's updated , Will trigger useEffect
3 Pass in empty array
Run only once effect( Only when the component is mounted and uninstalled )
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const custom = () => {
const [number, setNumber] = React.useState(0); React.useEffect(() => {
console.log(' Trigger useEffect' + number); setNumber(5) }, []); return <button onClick={
() => setNumber(number + 1)}> Click on {
number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
( The beginning is refreshed ) When you mount it useEffect hold number Set to 5, Subsequent updates do not trigger useEffect
4 effect Return function
Execute the return function when uninstalling
Take the timer as an example , This is the case when there is no return function
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; const Custom = () => {
const [number, setNumber] = React.useState(0); React.useEffect(() => {
console.log(' Trigger useEffect' + number) let interval = null; let t = 0 interval = setInterval(() => {
console.log(' Timer ', t); setNumber(++t) }, 1000); }, []); return <div> Timer {
number}</div> } const customSwitch = () => {
const [on, setOn] = React.useState(false); return [<button onClick={
() => setOn(!on)}>{
on ? ' close ' : ' Turn on '}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>
</html>
custom When the component is uninstalled , The timer did not cancel , After remounting , There are two timers
Cancel the timer in the return function
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel"> const e = React.createElement; let interval = null; const Custom = () => {
const [number, setNumber] = React.useState(0); React.useEffect(() => {
console.log(' Trigger useEffect' + number) let t = 0 interval = setInterval(() => {
console.log(' Timer ', t); setNumber(++t) }, 1000); return ()=> {
console.log(' Trigger when unloading effect') clearInterval(interval) } }, []); return <div> Timer {
number}</div> } const customSwitch = () => {
const [on, setOn] = React.useState(false); return [<button onClick={
() => setOn(!on)}>{
on ? ' close ' : ' Turn on '}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>
</html>
uninstall custom When , Cancel timer , When you mount again , Turn on timer .
Official website :https://react.docschina.org/docs/hooks-effect.html
This is also very good :https://blog.csdn.net/aiwwy/article/details/123338490
边栏推荐
- (POJ - 3685) matrix (two sets and two parts)
- 树莓派CSI/USB摄像头使用mjpg实现网页摄像头监控
- 渗透测试 ( 3 ) --- Metasploit Framework ( MSF )
- AcWing——第55场周赛
- QT有关QCobobox控件的样式设置(圆角、下拉框,向上展开、可编辑、内部布局等)
- frida hook so层、protobuf 数据解析
- 力扣——第298场周赛
- Flag framework configures loguru logstore
- [exercise-7] crossover answers
- Codeforces Round #798 (Div. 2)A~D
猜你喜欢
渗透测试 ( 1 ) --- 必备 工具、导航
快速转 TypeScript 指南
渗透测试 ( 2 ) --- 渗透测试系统、靶机、GoogleHacking、kali工具
[exercise-5] (UVA 839) not so mobile (balance)
Information security - threat detection - Flink broadcast stream broadcaststate dual stream merging application in filtering security logs
Data storage in memory & loading into memory to make the program run
C language is the watershed between low-level and high-level
The "sneaky" new asteroid will pass the earth safely this week: how to watch it
MySQL import database error [err] 1273 - unknown collation: 'utf8mb4_ 0900_ ai_ ci’
Programmers, what are your skills in code writing?
随机推荐
Penetration test (8) -- official document of burp Suite Pro
最全编程语言在线 API 文档
b站 實時彈幕和曆史彈幕 Protobuf 格式解析
F - birthday cake (Shandong race)
[exercise-6] (UVA 725) division = = violence
[exercise-6] (PTA) divide and conquer
Configuration du cadre flask loguru log Library
渗透测试 ( 5 ) --- 扫描之王 nmap、渗透测试工具实战技巧合集
Information security - threat detection - Flink broadcast stream broadcaststate dual stream merging application in filtering security logs
1855. Maximum distance of subscript alignment
The most complete programming language online API document
CEP used by Flink
Codeforces Round #803 (Div. 2)A~C
渗透测试 2 --- XSS、CSRF、文件上传、文件包含、反序列化漏洞
Openwrt build Hello ipk
C basic grammar
[exercise -10] unread messages
MySQL grants the user the operation permission of the specified content
860. Lemonade change
921. Minimum additions to make parentheses valid