本文主要是介绍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()的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
