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
相关推荐
小阮的学习笔记6 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜7 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=7 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck12 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!32 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。38 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼44 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架