react中的useEffect()的使用

devtools/2024/10/18 12:20:58/

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


http://www.ppmy.cn/devtools/42942.html

相关文章

【Python设计模式08】原型模式

原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它通过复制现有的对象来创建新的对象&#xff0c;而不是通过实例化类来创建对象。原型模式使得对象的创建更加灵活和高效&#xff0c;特别是在创建对象的过程复杂或代价高昂时。 原型模式的…

AWS安全性身份和合规性之Identity and Access Management(IAM)

通过AWS Identity and Access Management&#xff08;IAM&#xff09;&#xff0c;您可以指定谁或什么能够访问AWS中的服务和资源、集中管理精细权限&#xff0c;并分析访问权限以优化跨AWS的权限。 比如一家软件开发公司需要在AWS上创建多个开发人员账户&#xff0c;并对其进…

【教程】利用API接口添加本站同款【每日新闻早早报】-每天自动更新,不占用文章数量

本次分享的是给网站添加一个每日早报的文章&#xff0c;可以看到本站置顶上面还有一个日更的日报&#xff0c;这是利用ALAPI的接口完成的&#xff01;利用接口有利也有弊&#xff0c;因为每次用户访问网站的时候就会增加一次API接口请求&#xff0c;导致文章的请求会因为请求量…

计划跳槽需要做哪些准备?

计划跳槽是一个复杂的过程&#xff0c;需要充分的准备和策略。以下是一些关键的准备步骤&#xff1a; 自我评估&#xff1a;首先&#xff0c;明确你跳槽的原因和目标。你想从新工作中得到什么&#xff1f;是更好的薪酬、职业发展、工作环境&#xff0c;还是其他因素&#xff1…

Ai自动贴图直播项目的趋势,智享自动直播GMV增加工具

在当今社会&#xff0c;直播行业正在悄然地改变着人们的生活方式。无论是在闲暇时光中放松身心&#xff0c;还是在临睡前享受休闲娱乐&#xff0c;观众们越来越习惯于通过刷短视频或者观看直播来消遣自己。根据统计数据显示&#xff0c;到2023年全球将有超过10.74亿网民&#x…

视觉SLAM十四讲:从理论到实践(Chapter5:相机与图像)

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 目标 理解针孔相机的模型、内参与径向畸变参数。理解一个空间点是如何投影到相机成像平面的。掌握OpenCV的图像存储与表达方式。学会基本的摄像头标定方法。 一、相…

基于移动多媒体信源与信道编码调研

前言 移动多媒体是指在移动通信环境下&#xff0c;通过无线网络传输的音频、视频、图像等多种媒体信息。移动多媒体的特点是数据量大、传输速率高、服务质量要求高&#xff0c;因此对信源编码和信道编码的性能提出了更高的要求。 本文对进3年的移动多媒体信源与信道编码的研究…

Flutter 中的 TweenAnimationBuilder 小部件:全面指南

Flutter 中的 TweenAnimationBuilder 小部件&#xff1a;全面指南 在Flutter中&#xff0c;动画是为应用增添活力和吸引力的重要方式。TweenAnimationBuilder是一个功能强大的动画组件&#xff0c;它允许开发者创建基于插值器&#xff08;tween&#xff09;的动画效果。这意味…