在函数式组件里面使用useEffect()可以实现在类式组件里面的生命周期的效果
使用:
useEffect(()=>{},[])第一个参数是一个回调函数,在里面编写要进行的操作,第二个参数是依赖,如果数组为空,说明不依赖于任何的状态,回调函数里面的操作只会在初始化时执行一次,后续状态更新不会执行里面的操作,相当于类式组件里面的componentDidMount()
如果数组里面写了依赖,那么当所依赖的状态发生变化时,会再次执行回调函数里面的操作,相当于类式组件里面的componentDidUpdate()
在回调函数的最后,可以返回一个函数,这个函数会在组件销毁的时候被执行
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> ) }
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;