useEffect的概念以及使用(对接口)

// useEffect的概念以及使用
import {useEffect, useState} from 'react'const Url="http://geek.itheima.net/v1_0/channels"function App() {// 创建状态变量const [lustGet,setLustGet]=useState([]);// 渲染完了之后执行这个useEffect(() => {// 额外的操作,获取接口数据// 获取接口数据async function getList(){const res= await fetch(Url);const jsonRes=await res.json();setLustGet(jsonRes.data.channels)}getList();}, []);return <div className="App">{lustGet.map(item=>(<span key={item.id}>{item.name}-----</span>))}</div>;
}
export default App;

不同依赖项说明

// useEffect的依赖项不同   执行时机不同
import { useEffect, useState } from "react";function App() {// 创建状态变量const [count, setCount] = useState(0);const countCLick = () => {setCount(count + 1);};//无依赖项的话   只要更新变量就会执行// useEffect(() => {//   console.log("useEffect执行胃");// });//空依赖项的话  只会在界面渲染完之后执行一次// useEffect(() => {//   console.log("useEffect执行胃");// }, []);// 有依赖项胡话  会在变量更新胡时候执行useEffect(() => {console.log("count改变了所以会执行");}, [count]);return (<div className="App"><button onClick={countCLick}>点击次数{count}</button></div>);}
export default App;

useEffect清理副作用

案例:在组件卸载的时候清除定时器,在渲染时开启定时器

// useEffect的依赖项不同   执行时机不同
import { useEffect, useState } from "react";function Son(){// 开启定时器渲染完毕useEffect(()=>{const timeer= setInterval(()=>{console.log("1秒钟了");},1000);// 清除副作用(返回这个函数很重要)return ()=>{console.log("组件卸载");// 这个地方是组件被卸载的时候执行的clearInterval(timeer);}},[])return <div>我是子组件</div>
}function App() {const [Show,setShow]=useState(true);return (<div className="App">{Show && <Son></Son>}<button onClick={()=>{setShow(false)  }}>点它点它</button></div>);}
export default App;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/27821.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【TypeScript】泛型工具

跟着 小满zs 学 ts&#xff1a;学习TypeScript24&#xff08;TS进阶用法-泛型工具&#xff09;_ts泛型工具-CSDN博客 Partial 所有属性可选的意思Required 所有属性必选的意思Pick 提取部分属性Exclude 排除部分属性emit 排除部分属性并且返回新的类型 Partial 属性变为可选。…

Qt-Advanced-Docking-System的学习

Qt5.12实现Visual Studio 2019 拖拽式Dock面板-Qt-Advanced-Docking-System_c_saide6000-GitCode 开源社区 (csdn.net) 我使用的是Qt5.5.0 开始&#xff0c;我下载的是最新版的源码&#xff1a;4.1版本 但是&#xff0c;打开ads.pro工程文件&#xff0c;无法编译成功。 然后…

RERCS系统开发实战案例-Part02 创建BOPF对应的业务对象(Business Object)

1、通过事务码 BOBF创建业务对象 2、输入debug&#xff0c;进入编辑模式新建BO对象&#xff1b; 选择对应的BO对象属性类别&#xff1a; 3、激活BO对象 接口页签&#xff1a; 属性页签&#xff1a;自动带出标准的常量 改接口类部分源码&#xff1a; 4、BO对象Node Elemen…

Golang的Gin框架

目录 功能以及简单使用 gin.Engine数据结构 RouterGroup methodTrees gin.context 功能以及简单使用 功能: • 支持中间件操作&#xff08; handlersChain 机制 &#xff09; • 更方便的使用&#xff08; gin.Context &#xff09; • 更强大的路由解析能力&#xff08…

windows下的eclipse按Ctrl+Shift+F格式化代码不起作用的处理

1、先上张图&#xff1a; 上面Format&#xff1a;CtrlShiftF&#xff0c;按了以后不起作用。 2、这个快捷键不起作用的原因&#xff1a;可能是快捷键冲突了。 机器上装了Sougou输入法&#xff0c;将输入法切换为英文模式是起作用的。 那么应该就是这个原因了。 3、解决方法…

【Ardiuno】使用ESP32单片机创建web服务通过网页控制小灯开关的实验(图文)

经过实验测试ESP32单片机的网络连接还是很方便的&#xff0c;这里小飞鱼按照程序实例的代码亲自实验一下使用Esp32生成的网页服务来实现远程无线控制小灯开关功能&#xff0c;这样真的是离物联网开发越来越近了&#xff0c;哈哈&#xff01; 连接好开发板和电路&#xff0c;将…

React入门教程:构建你的第一个React应用

在当今快速发展的Web开发领域&#xff0c;前端技术日新月异&#xff0c;而React作为一款强大的JavaScript库&#xff0c;已经成为众多开发者的首选。React以其组件化、高效的性能和灵活的数据处理机制闻名于世&#xff0c;被广泛用于构建动态且复杂的用户界面。在本教程中&…

Elixir学习笔记——输入输出和文件系统

本章介绍输入/输出机制、文件系统相关任务以及相关模块&#xff08;如 IO、File 和 Path&#xff09;。IO 系统提供了一个很好的机会来阐明 Elixir 和 Erlang VM 的一些思维模式和新奇思想。 输入输出模块 输入输出模块是 Elixir 中读写标准输入/输出 (:stdio)、标准错误 (:s…

Python中关于电商商品数据的采集【taobao/JD/商品详情数据返回】

在Python中采集电商商品数据&#xff08;如淘宝、京东等&#xff09;通常涉及到网络爬虫&#xff08;web scraping&#xff09;或称为网络数据抓取&#xff08;web data scraping&#xff09;。由于电商平台通常会有反爬虫机制&#xff0c;因此直接抓取数据可能会遇到各种挑战&…

基于51单片机的智能水表

一.硬件方案 本设计主要以51单片机作为主控处理器的智能水表&#xff0c;该水表能够记录总的用水量和单次用水量&#xff0c;当用水量超出设定值时系统发出声光报警提醒&#xff0c;水量报警值能够通过按键进行自行设置&#xff0c;并且存储于AT24C02中&#xff0c;并且可以测…

C++11默认成员函数控制

默认成员函数有 如果自己不显示声明&#xff0c;那么默认编译器会自己生成一个 如果有一个构造函数被声明了&#xff0c;那其他的默认函数编译器就不会再生成 这样的有时又不生成&#xff0c;容易造成混乱&#xff0c;于是C11让程序员可以控制是否需要编译器生成。 显式缺省函…

(虚拟机)VMware软件的安装及Ubuntu系统安装

一、VMware软件的安装 软件下载&#xff0c;可以自己找或者百度网盘下载&#xff1a; 通过百度网盘分享的文件&#xff1a;ubuntu16…等2个文件 链接:https://pan.baidu.com/s/1VEnZKY9DJ1T1vC3ae20gKQ 提取码:11b6 复制这段内容打开「百度网盘APP 即可获取」 1、解压VMwar…

06--jenkins构建CI_CD

前言&#xff1a;上一篇文章整理了git的部署和使用&#xff0c;这章主要复习持续集成软件Jenkins&#xff0c;这个技术现在在云计算方面也是有应用的&#xff0c;同时也是越高级越智能的软件代表。 1、概念简介 1&#xff09;jenkins是什么 Jenkins是一个开源的、可扩展的持…

Linux 终端窗口设置为透明

Linux 终端窗口设置为透明 打开终端 右键鼠标 选择Profile Preferences 点击Background 选择 Transparent background 拖动滑条调整透明度 完成。

Nintex流程平台引入生成式人工智能,实现自动化革新

工作流自动化提供商Nintex宣布在其Nintex流程平台上推出一系列新的人工智能驱动改进。这些增强显著减少了文档化、管理和自动化业务流程所需的时间。这些新特性为Nintex流程平台不断扩展的人工智能能力增添了新的亮点。 Nintex首席产品官Niranjan Vijayaragavan表示&#xff1a…

甄嬛传熹贵妃上户口:如果让他陪你过冬天,那朕能不能睡中间?贝叶斯模型推导爸爸去哪儿

关注微信公众号 数据分析螺丝钉 免费领取价值万元的python/java/商业分析/数据结构与算法学习资料 背景 《甄嬛传》是大家耳熟能详的宫廷剧&#xff0c;其中复杂的宫斗情节和深刻的人物刻画让人津津乐道。甄嬛因为与皇帝(四郎)闹翻了&#xff0c;去甘露寺待了一段时间&#x…

Navicat和SQLynx产品功能比较一(整体比较)

Navicat和SQLynx都是数据库管理工具&#xff0c;在过去的二十年中&#xff0c;国内用户主要是使用Navicat偏多&#xff0c;一般是个人简单开发需要&#xff0c;数据量一般不大&#xff0c;开发相对简单。SQLynx是最近几年的数据库管理工具&#xff0c;Web开发&#xff0c;桌面版…

PyTorch C++扩展用于AMD GPU

PyTorch C Extension on AMD GPU — ROCm Blogs 本文演示了如何使用PyTorch C扩展&#xff0c;并通过示例讨论了它相对于常规PyTorch模块的优势。实验在AMD GPU和ROCm 5.7.0软件上进行。有关支持的GPU和操作系统的更多信息&#xff0c;请参阅系统要求&#xff08;Linux&#xf…

SpringBoot使用jasypt实现数据库信息的脱敏,以此来保护数据库的用户名username和密码password(容易上手,详细)

1.为什么要有这个需求&#xff1f; 一般当我们自己练习的时候&#xff0c;username和password直接是爆露出来的 假如别人路过你旁边时看到了你的数据库账号密码&#xff0c;他跑到他的电脑打开navicat直接就是一顿连接&#xff0c;直接疯狂删除你的数据库&#xff0c;那可就废…

字符数组基础知识及题目

死识。。。 字符该如何存储呢&#xff1f;这一点我们在以前就接触过了。用char来存储。 如何输入一个单词呢&#xff1f; char a[10002]; scanf("%s",a); 就不用地址符了。 如何输入句子呢&#xff1f; char a[100002]; gets(a); gets是读入句子的&#xff0c…