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
相关推荐
Angel_girl3196 分钟前
vue项目使用svg图标
前端·vue.js
難釋懷10 分钟前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo12 分钟前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏35 分钟前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪37 分钟前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星43 分钟前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.1 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁1 小时前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm
夏日米米茶1 小时前
Windows系统下npm报错node-gyp configure got “gyp ERR“解决方法
前端·windows·npm
且白2 小时前
vsCode使用本地低版本node启动配置文件
前端·vue.js·vscode·编辑器