hooks中useEffect详解

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

一、作为 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的全部用法了呀，喜欢的小伙伴可以点个收藏博客。