useEffect
2022/2/16 23:15:55
本文主要是介绍useEffect,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
在函数式组件里面使用useEffect()可以实现在类式组件里面的生命周期的效果
使用:
useEffect(()=>{},[])第一个参数是一个回调函数,在里面编写要进行的操作,第二个参数是依赖,如果数组为空,说明不依赖于任何的状态,回调函数里面的操作只会在初始化时执行一次,后续状态更新不会执行里面的操作,相当于类式组件里面的componentDidMount()
如果数组里面写了依赖,那么当所依赖的状态发生变化时,会再次执行回调函数里面的操作,相当于类式组件里面的componentDidUpdate()
在回调函数的最后,可以返回一个函数,这个函数会在组件销毁的时候被执行
Demo.js
import React, { useState, useEffect, useRef } from 'react' export default function Demo() { const [time, settime] = useState(Date()) const [color, setcolor] = useState('yellow') const m = useRef() useEffect(() => { let timmer = setInterval(() => { console.log(Date()) settime(Date()) setcolor(m.current.value) }, 1000) console.log('时间更新了') return () => { clearInterval(timmer) } }, []) useEffect(() => { let timmer = setTimeout(() => { console.log('哈哈哈哈') setcolor(m.current.value) }, 5000) return () => { clearTimeout(timmer) } }, []) return ( <div> <span>{time}</span> <input ref={m} type='text' /> <button>换色</button> <div style={{ background: `${color}`, width: '100px', height: '100px' }} >11</div> </div> ) }
App.js
import logo from './logo.svg'; import { useState } from 'react'; import './App.css'; import Demo from './hooks/02-useEffect' function App() { const [flag, setflag] = useState(true) return ( <div className="App"> {flag && <Demo />} <button onClick={() => { setflag((flag) => !flag) }}>切换</button> </div> ); } export default App;
这篇关于useEffect的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升