React的useEffect

概念:useEffect是一个React Hook函数,组件渲染之后执行的函数
在这里插入图片描述
在这里插入图片描述

  1. 参数1是一个函数,可以把它叫做副作用函数,在函数内部可以放置要执行的操作
  2. 参数2是一个数组(可选参),在数组里放置依赖项,不同依赖项会影响第一个参数函数的执行,当是一个空数组的时候,副作用函数只会在组件渲染完毕之后执行一次

    useEffect依赖说明

useEffect副作用函数的执行时机存在多种情况,根据传入依赖项的不同,会有不同的执行表现
依赖项就是你要控制的变量等,组件更新:包括值更新

依赖项副作用功函数的执行时机
没有依赖项组件初始渲染 + 组件更新时执行
空数组依赖只在初始渲染时执行一次
添加特定依赖项组件初始渲染 + 依赖项变化时执行

清除副作用

概念:在useEffect中编写的由渲染本身引起的对接组件外部的操作,社区也经常把它叫做副作用操作,比如在useEffect中开启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清理副作用
在这里插入图片描述

自定义Hook实现

概念:自定义Hook是以 use打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用

在这里插入图片描述

// 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hookimport { useState } from "react"function useToggle () {// 可复用的逻辑代码const [value, setValue] = useState(true)const toggle = () => setValue(!value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle}
}// 封装自定义hook通用思路// 1. 声明一个以use打头的函数
// 2. 在函数体内封装可复用的逻辑(只要是可复用的逻辑)
// 3. 把组件中用到的状态或者回调return出去(以对象或者数组)
// 4. 在哪个组件中要用到这个逻辑,就执行这个函数,解构出来状态和回调进行使用function App () {const { value, toggle } = useToggle()return (<div>{value && <div>this is div</div>}<button onClick={toggle}>toggle</button></div>)
}export default App

React Hooks使用规则

  1. 只能在组件中或者其他自定义Hook函数中调用
  2. 只能在组件的顶层调用,不能嵌套在if、for、其它的函数中
    在这里插入图片描述

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

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

相关文章

Linux系统中搭建Mosquitto MQTT服务并实现远程访问本地消息代理进行通信

文章目录 1. Linux 搭建 Mosquitto2. Linux 安装Cpolar3. 创建MQTT服务公网连接地址4. 客户端远程连接MQTT服务5. 代码调用MQTT服务6. 固定连接TCP公网地址7. 固定地址连接测试 今天和大家分享一下如何在Linux系统中搭建Mosquitto MQTT协议消息服务端,并结合Cpolar内网穿透工具…

使用 Python 和 OpenCV 进行实时目标检测的详解

使用到的模型文件我已经上传了&#xff0c;但是不知道能否通过审核&#xff0c;无法通过审核的话&#xff0c;就只能 靠大家自己发挥实力了&#xff0c;^_^ 目录 简介 代码介绍 代码拆解讲解 1.首先&#xff0c;让我们导入需要用到的库&#xff1a; 2.然后&#xff0c;设…

【C语言】指针篇- 深度解析Sizeof和Strlen:热门面试题探究(5/5)

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、简单介绍Sizeof和Strlen1.1 Sizeof1.2 Strlen函数1.3 Sie…

快速建站介绍

随着在线业务和电子商务的规模不断扩大&#xff0c;初创公司、个人网站和小型企业都需要快速地搭建自己的网站&#xff0c;以便更好地展示自己、推广产品和服务&#xff0c;并实现在线交易。快速建站已成为在线业务发展的一种主流方式&#xff0c;因为它能够快速地创建一个响应…

uniapp 自定义 App启动图

由于uniapp默认的启动界面太过普通 所以需要自定义个启动图 普通的图片不可以过不了苹果的审核 所以使用storyboard启动图 生成 storyboard 的网站&#xff1a;初雪云-提供一站式App上传发布解决方案

Java学习第02天-类型转换、运算符

目录 类型转换 自动类型转换 表达式的自动类型转换 强制类型转换 运算符 基本运算符 案例解答 连接字符串 自增自减运算符 面试习题 赋值运算符 比较运算符 逻辑运算符 基本逻辑运算符 短路逻辑运算符 三元运算符 基础知识 拓展案例 运算符优先级 读取用户…

UNeXt: a Low-Dose CT denoising UNet model with the modified ConvNeXt block

UNeXt&#xff1a;采用改进的ConvNeXt块的低剂量CT去噪UNet模型 论文链接&#xff1a;https://ieeexplore.ieee.org/document/10095645 项目链接&#xff1a;没找到 Abstract 近几十年来&#xff0c;临床医生广泛使用计算机断层扫描(CT)进行医学诊断。医疗辐射有潜在危险&am…

77、贪心-买卖股票的最佳时机

思路 具体会导致全局最优&#xff0c;这里就可以使用贪心算法。方式如下&#xff1a; 遍历每一位元素找出当前元素最佳卖出是收益是多少。然后依次获取最大值&#xff0c;就是全局最大值。 这里可以做一个辅助数组&#xff1a;右侧最大数组&#xff0c;求右侧最大数组就要从…

ADS1.2中的代码debug的时候不出来代码的解决办法

我总觉得ADS1.2这个软件挺奇怪的&#xff0c;一阵一阵的&#xff0c;我遇到了很多奇怪的问题&#xff0c;这里记录一下吧。 1、新建文件的时候&#xff0c;没法选择这个add to project 解决办法&#xff1a;如果没有已存在的.mcp文件&#xff0c;就先新建project&#xff0c;然…

项目运行到手机端

运行到真机 手机和点到连在同一个wifi网络下面点击hbuiler上面的预览得到一个&#xff0c;network的网址这个时候去在手机访问&#xff0c;那么就可以访问网页了 跨域处理 这个时候可能会访问存在跨域问题 将uniapp的H5版本运行到真机进行调试&#xff0c;主要涉及到跨域问题…

java-Spring-mvc-(请求和响应)

目录 &#x1f4cc;HTTP协议 超文本传输协议 请求 Request 响应 Response &#x1f3a8;请求方法 GET请求 POST请求 &#x1f4cc;HTTP协议 超文本传输协议 HTTP协议是浏览器与服务器通讯的应用层协议&#xff0c;规定了浏览器与服务器之间的交互规则以及交互数据的格式…

【机器学习】HQ-Edit引领图像编辑新潮流

科技新纪元&#xff1a;HQ-Edit引领图像编辑新潮流 一、HQ-Edit的诞生&#xff1a;一场技术的革命二、技术实现与优势&#xff1a;强大的编辑能力和精准的匹配三、应用前景与实例展示&#xff1a;InstructPix2Pix的突破 在数字化时代&#xff0c;图像编辑技术正以前所未有的速度…

M3D-NCA: Robust 3D Segmentation with Built-In Quality Control论文速读

文章目录 M3D-NCA: Robust 3D Segmentation with Built-In Quality Control摘要方法实验结果 M3D-NCA: Robust 3D Segmentation with Built-In Quality Control 摘要 这是关于医学图像分割的一篇论文的结构化总结&#xff1a; 背景和挑战&#xff1a; 医学图像分割依赖于大型…

【热闻速递】Google 裁撤 Python研发团队

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 【&#x1f525;热闻速递】Google 裁撤 Python研发团队引入研究结论 【&#x1f5…

xyctf ez_rand

[核心的代码就是这一部分&#xff0c;只要得到v4的值&#xff0c;也就是随机种子&#xff0c;那就可以把值弄出来了。所以我们需要做的就是爆破随机种子。 然后有一点是需要注意的&#xff0c;IDA这里显示的数据有可能是小端序的&#xff0c;所以我们需要export data&#xff…

DSP实时分析平台设计方案:924-6U CPCI振动数据DSP实时分析平台

6U CPCI振动数据DSP实时分析平台 一、产品概述 基于CPCI结构完成40路AD输入&#xff0c;30路DA输出的信号处理平台&#xff0c;处理平台采用双DSPFPGA的结构&#xff0c;DSP采用TI公司新一代DSP TMS320C6678&#xff0c;FPGA采用Xilinx V5 5VLX110T-1FF1136芯片&#xff…

向量的旋转矩阵

我们都知道&#xff0c;矩阵的乘法可以表示旋转。那么&#xff0c;这一理论的数学机理是什么呢&#xff1f;以及&#xff0c;这个旋转角度该怎么用矩阵表示呢&#xff1f; 本文用二维向量旋转来推导旋转矩阵的公式。假设&#xff0c;我们有一个向量P(x, y)&#xff0c;准备通过…

手撕sql面试题:找出所有观看视频ID “1001“ 的观看时长大于他们观看视频ID “1002“ 的观看时长的用户ID

分享最近面试的sql面试题&#xff1a; 下面是表结构&#xff1a; CREATE TABLE video_records ( video_id char(4) NOT NULL COMMENT 视频id, user_id char(4) NOT NULL COMMENT 用户id, play_duration int NOT NULL COMMENT 观看时长, PRIMARY KEY (video_id,…

Ubuntu卸载已安装软件

前言 在Linux系统上安装了一些软件&#xff0c;但是卸载起来相比于Windows系统麻烦的多&#xff0c;这里总结了两种办法&#xff0c;希望对遇到这种问题的小伙伴能够有所帮助 1.Ubuntu Software 卸载 1.点击桌面上的Ubuntu Software并且选择installed 选中想要卸载的软件再按…

51. 【Android教程】JSON 数据解析

在上一节我们学习了 xml 数据格式&#xff0c;如果你觉得 xml 的数据比较冗余&#xff0c;标签、属性等等定义过于复杂&#xff0c;那么这一节我们将继续学习另一种更精简、更高效的数据格式—— Json。它广泛的运用于数据持久化以及网络传输中&#xff0c;这一节我们一起学习 …