react中的useEffect()的使用详解
作者：小刘，刘不刘
useEffect()是react中的hook函数,作用是用于创建由渲染本身引起的操作,介绍了依赖项数组不同的区别,对react useEffect()使用相关知识感兴趣的朋友一起看看吧
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到此这篇关于react中的useEffect()的使用的文章就介绍到这了,更多相关react useEffect()使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！