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
相关推荐
烛阴27 分钟前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
Allen Bright28 分钟前
【HTML-16】深入理解HTML中的块元素与行内元素
前端·html
前端卧龙人35 分钟前
受够了webpack的速度,我选择了vite重构vue2项目
前端
巛、42 分钟前
ES6面试题
前端·面试·es6
周全全1 小时前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪2 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九2 小时前
html、css(javaweb第一天)
前端·css·html
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿2 小时前
《开篇:课程目录》
前端·c#