useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,而不是事件的触发,比如Ajax请求,DOM的更改
首先useEffect()是个函数,接受两个参数,第一个参数是一个方法,第二个参数是数组 称为依赖项数组,可以没有。第二个参数的不同会影响第一个参数方法的使用
依赖项数组不同的区别
另外还有一种情况就是清除useEffect()的副作用,直接在第一个参数函数里面写一个return一个函数,就会在组件卸载的时候自动清理
import { useEffect, useState } from "react"
function Son(){
// 开启一个定时器
useEffect(()=>{
const timer= setInterval(()=>{
console.log("定时器");
},1000)
return ()=>{
clearInterval(timer)
}
},[])
return (
<>
<div>这是 son组件
</div>
</>
)
}
function App(){
// 1.没有依赖项的时候 初始会触发 组件更新会触发
const [count,setCount] = useState(0)
// useEffect(()=>{
// console.log("副作用函数执行与否");
// })
// 2.当依赖项为空数组的时候 只会在初始时触发
// useEffect(()=>{
// console.log("副作用函数执行 []");
// },[])
// 3.传入特定的依赖项 初始时触发 依赖项变化时触发
useEffect(()=>{
console.log("副作用函数执行 []");
},[count])
// 4.清除useEffect的副作用 通过在第一个参数函数中return一个函数 清除副作用
// 最常用的常见就是在组件卸载时自动执行
const [show,setShow] = useState(true)
return (
<>
<div>useEffect的使用 根据依赖项的不同</div>
<button onClick={()=>setCount(count+1)}>{count}</button>
<div>
{show&&<Son/>}
<button onClick={()=>setShow(false)}>卸载son组件</button>
</div>
</>
)
}
export default App