全栈的自我修养 ————— react的hooks中useEffect的使用

== 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