useEffect依赖项使用,和useEffect清除副作用(如组件卸载时清除定时器)
用于在react组件中创建不是由事件引起的而是由渲染本身引起的,比如发送Ajax请求、更改dom等等
import { useEffect, useState } from 'react'; function App() { const [count,setcount] =useState(0) const [msg,setmsg] =useState('你好') // 1.没有依赖项,在组件渲染完成之后初始一次 + 组件更新 useEffect(()=>{ console.log('没有依赖项,在组件渲染完成之后初始一次 + 组件更新') }) // 2.依赖项为空,在组件渲染完成之后初始一次 useEffect(()=>{ console.log('依赖项为空,在组件渲染完成之后初始一次') },[]) // 3.传入特定依赖项,初始 + 依赖项变化时执行 useEffect(()=>{ console.log('传入特定依赖项,初始 + 依赖项变化时执行') },[msg]) return ( <div className="App" > 这是APP页面 <div>{count}</div> <button onClick={()=>setcount(count+1)}>没有依赖项按钮</button> <div>{msg}</div> <button onClick={()=>setmsg('你叫什么名字')}>传入特定依赖项按钮</button> </div> ); }
2.useEffect清除副作用(如组件卸载时清除定时器)
import { useEffect, useState } from 'react'; const Son=()=>{ useEffect(()=>{ const timer= setInterval(()=>{ console.log('定时器在清除Son后停止执行') },1000) //在清除Son组件时清除定时器,避免内存泄漏 return ()=>{ clearInterval(timer) } },[]) return( <div>这是Son组件</div> ) } function App() { const [show,setShow]=useState(true) return ( <div className="App" > 这是APP页面 {show && <Son></Son>} <button onClick={()=>setShow(false)}>卸载Son组件</button> </div> ); } export default App;