hooks中useEffect详解

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个函数的组合。

一、作为 componentDidMount 使用,[ ] 作第二个参数
const UseEffect = () => {
  const [count, setCount] = useState(() => 0)
  useEffect(() => {
    console.log(`点击了${count}次数`) //只会初始化执行一次
  }, [])
  return <button onClick={() => setCount((count) => count + 1)}>点击</button>
}
二、作为 componentDidUpdate 使用,可指定依赖
const UseEffect = () => {
  const [count, setCount] = useState(() => 0)
  useEffect(() => {
     console.log(`点击了${count}次数`) //count变化就能执行
    }, [count])
  return <button onClick={() => setCount((count) => count + 1)}>点击</button>
}
三、作为 componentWillUnmount 使用,通过 return
const UseEffect = () => {
  const [count, setCount] = useState(() => 0)
  useEffect(() => {
      const timer = setInterval(() => {
        console.log(`点击了${count}次数`)
      }, 1000)
      return () => clearInterval(timer)//组件消灭时,执行return里的操作
    })
  return <button onClick={() => setCount((count) => count + 1)}>点击</button>
}
四、以上三种用途可同时存在
const UseEffect = () => {
  const [count, setCount] = useState(() => 0)
  useEffect(() => {
      const timer = setInterval(() => {
        console.log(`点击了${count}次数`)
      }, 1000)
      console.log('任何state变化,都会触发')
      return () => clearInterval(timer)
    })
  return <button onClick={() => setCount((count) => count + 1)}>点击</button>
}

以上就是useEffect的全部用法了呀,喜欢的小伙伴可以点个收藏博客。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值