当前位置:网站首页>useEffect,函数组件挂载和卸载时触发
useEffect,函数组件挂载和卸载时触发
2022-07-06 09:28:00 【梦想身高1米8】
1 不带参数
第一次渲染之后和每次更新之后都会执行
<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('触发useEffect' + number); }); return <button onClick={
() => setNumber(number + 1)}>点击{
number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
每次更新,都会触发useEffect
2 带参数
可传多个[param1,param2,param3....]
指定参数变化时执行
<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('触发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>
只有change更新的时候,才会触发useEffect
3 传入空数组
只运行一次的 effect(仅在组件挂载和卸载时执行)
<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('触发useEffect' + number); setNumber(5) }, []); return <button onClick={
() => setNumber(number + 1)}>点击{
number}</button> } const domContainer = document.querySelector('#root'); ReactDOM.render(e(custom), domContainer); </script>
</html>
(开头刷新了一下)挂载的时候useEffect把number设置为5,之后的更新不触发useEffect
4 effect返回函数
卸载的时候执行返回函数
用定时器做例子,这是没有返回函数的情况
<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('触发useEffect' + number) let interval = null; let t = 0 interval = setInterval(() => {
console.log('定时器', t); setNumber(++t) }, 1000); }, []); return <div>定时器{
number}</div> } const customSwitch = () => {
const [on, setOn] = React.useState(false); return [<button onClick={
() => setOn(!on)}>{
on ? '关闭' : '开启'}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>
</html>
custom组件卸载的时候,定时器没有取消,重新挂载之后,有了两个定时器
在返回函数中取消定时器
<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('触发useEffect' + number) let t = 0 interval = setInterval(() => {
console.log('定时器', t); setNumber(++t) }, 1000); return ()=> {
console.log('卸载时触发effect') clearInterval(interval) } }, []); return <div>定时器{
number}</div> } const customSwitch = () => {
const [on, setOn] = React.useState(false); return [<button onClick={
() => setOn(!on)}>{
on ? '关闭' : '开启'}</button>, on && <Custom />] } const domContainer = document.querySelector('#root'); ReactDOM.render(e(customSwitch), domContainer); </script>
</html>
卸载custom的时候,取消定时器,再次挂载的时候,打开定时器。
官网:https://react.docschina.org/docs/hooks-effect.html
这个写的也挺好的:https://blog.csdn.net/aiwwy/article/details/123338490
边栏推荐
- MySQL import database error [err] 1273 - unknown collation: 'utf8mb4_ 0900_ ai_ ci’
- (POJ - 3579) median (two points)
- “鬼鬼祟祟的”新小行星将在本周安全掠过地球:如何观看
- Borg maze (bfs+ minimum spanning tree) (problem solving report)
- 图图的学习笔记-进程
- Penetration testing (5) -- a collection of practical skills of scanning King nmap and penetration testing tools
- Advancedinstaller安装包自定义操作打开文件
- 渗透测试 ( 7 ) --- 漏洞扫描工具 Nessus
- frida hook so层、protobuf 数据解析
- 【练习-1】(Uva 673) Parentheses Balance/平衡的括号 (栈stack)
猜你喜欢
Pytorch extract skeleton (differentiable)
Essai de pénétration (1) - - outils nécessaires, navigation
Luogu P1102 A-B number pair (dichotomy, map, double pointer)
渗透测试 ( 2 ) --- 渗透测试系统、靶机、GoogleHacking、kali工具
Codeforces Round #802(Div. 2)A~D
Quick to typescript Guide
C language learning notes
“鬼鬼祟祟的”新小行星将在本周安全掠过地球:如何观看
第 300 场周赛 - 力扣(LeetCode)
7-1 understand everything (20 points)
随机推荐
Codeforces Round #802(Div. 2)A~D
[exercise-7] (UVA 10976) fractions again?! (fraction split)
[exercise-6] (PTA) divide and conquer
If you want to apply for a programmer, your resume should be written like this [essence summary]
Penetration test (8) -- official document of burp Suite Pro
Codeforces Round #798 (Div. 2)A~D
pytorch提取骨架(可微)
Analysis of protobuf format of real-time barrage and historical barrage at station B
Penetration test (1) -- necessary tools, navigation
Information security - threat detection - detailed design of NAT log access threat detection platform
1005. Maximized array sum after K negations
409. Longest palindrome
HDU - 6024 building shops (girls' competition)
Sanic异步框架真的这么强吗?实践中找真理
Common configuration files of SSM framework
快速转 TypeScript 指南
The "sneaky" new asteroid will pass the earth safely this week: how to watch it
渗透测试 2 --- XSS、CSRF、文件上传、文件包含、反序列化漏洞
Information security - security professional name | CVE | rce | POC | Vul | 0day
Analyse du format protobuf du rideau en temps réel et du rideau historique de la station B