useEffect使用时有以下4种情况
1、不传递
useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后,当它运行时,它获取数据并更新状态。然后,一旦状态更新,组件将重新呈现,这将再次触发useEffect,这就是问题所在。
//所有更新都执行
useEffect(()=>{
console.log(props.number)
setNumber(props.number)
})
2、传递空数组
//仅在挂载和卸载的时候执行
useEffect(()=>{
console.log(props)
},[])
3、传递一个值
//count更新时执行
useEffect(()=>{
console.log(count)
},[count])
4、传递多个
const App: React.FC=({number})=>{
const [count,setCount] = useState(0);
useEffect(()=>{
console.log(count)
setCount(count)
},[count,setCount])
}
5、 监听props对象的更改
useEffect(()=>{
console.log(props.userInfo)
},[props.userInfo]) //props.userInfo更新时执行
6、return 方法
const timer = setInterval(() => {
setCount(count + 1)
}, 1000)
// useEffect方法的第一个参数是一个函数,函数可以return一个方法,这个方法就是在组件销毁的时候会被调用
useEffect(() => {
return () => {
clearInterval(timer)
}
}, [])