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
相关推荐
lichenyang4533 分钟前
功能界面的组件化编码流程
react.js
lilye6622 分钟前
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
前端·数据挖掘·数据分析
MZWeiei38 分钟前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
前端 贾公子44 分钟前
《Vuejs设计与实现》第 8 章(挂载与更新)
开发语言·前端·javascript
开始编程吧1 小时前
【HarmonyOS5】鸿蒙×React Native:跨端电商应用的「双引擎」驱动实践
前端
m0_746177191 小时前
小白进阶shell学习-----脚本实战案例
前端·chrome·学习
半碗水1 小时前
缝缝补补
前端·javascript
用户2519162427111 小时前
ES6之类的其他书写方式
javascript·ecmascript 6
空城机1 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js
BigTopOne1 小时前
【ijkplayer】 如何降低直播延迟?
前端