如果你熟悉 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的全部用法了呀,喜欢的小伙伴可以点个收藏博客。