react中useEffect这个hooks很关键,有监听、生命周期的类似功能,有类似vue中mounted等生命周期的功能
== hooks是react组件挂载完成后执行的,然后在每次组件重新渲染时候还会执行 ==
情况1:组件挂载完成后只想触发一次
如下需要添加一个空数组
import { useEffect } from "react"
const Index = () => {
useEffect(() => {
alert(111)
},[])
return <div>这是首页</div>
}
情况2:组件挂载完成后触发一次 + 组件渲染后触发
useEffect后面的数组内的值可以相当于监视器
import { useEffect, useState } from "react"
const Index = () => {
const [A, setA] = useState(1)
useEffect(() => {
console.log(A);
const res = setInterval(() => {
setA(A => A + 1)
}, 2000)
return () => clearInterval(res)
}, [A])
return <div>这是首页</div>
}
export default Index
情况3:任何地方发生重新渲染后就触发
即不用那个数组
import { useEffect, useState } from "react"
const Index = () => {
const [A, setA] = useState(1)
useEffect(() => {
console.log(A);
const res = setInterval(() => {
setA(A => A + 1)
}, 2000)
return () => clearInterval(res)
})
return <div>这是首页</div>
}
export default Index