useEffect

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)
	}
}, [])
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值