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
相关推荐
Myli_ing11 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风14 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave21 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟23 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾44 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue