React中的hook

React中的hook究竟是什么?

有哪些hook?

hook的两大规则

为什么hook要在顶层调用?

hook的调用需要在每一次render后都按照一样的顺序进行调用,否则会出现类似“野指针”的情况,但是要做到这一步,就需要hook在顶层调用。 

UseEffect hook

react组件生命周期 

 比如说,某些操作就只在初始渲染后执行,我们就可以使用useEffect。

  useEffect(function () {fetch(`http://www.omdbapi.com/?apikey=${KEY}&s=interstellar`).then((res) => res.json()).then((data) => setMovies(data.Search));}, []);

react中的副作用 (side effect)

 副作用是指react组件与该组件外部世界之间的任何交互,比如说从某些api获取数据,比如直接操作DOM。但实际上这些“副作用”有时候是有用而且必要的。

但是react又规定副作用不应该发生在组件渲染期间,所以我们可以创建副作用的地方有两个:

  1. 事件处理函数中;
  2. useEffect hook中;

有了useEffect hook,我们就可以编写不同组件实例不同生命周期需要运行代码了。

 事件处理函数与useEffect对比

注意:我们所谓的要注意组件不同的生命周期,本质上是为了与外部世界保持同步!

useEffect中的依赖数组

useEffect是什么? 

useEffect与生命周期 

注意:useEffect hook与生命周期紧密相关,但不是生命周期的hook!

useEffect究竟什么时候运行?

与上文所说不同,useEffect()不是在“渲染”之后,而是在浏览器绘制之后调用。

 ​​

两个蓝色空洞将在后文继续讲解。 

cleanUp 函数

两个蓝色空洞就是该函数。

 cleanUp函数的使用

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

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

相关文章

新手直播方案

简介 新手直播方案 ,低成本方案 手机/电脑 直接直播手机软件电脑直播手机采集卡麦电脑直播多摄像机 机位多路采集卡 多路麦加电脑(高成本方案) 直播推流方案 需要摄像头 方案一 :手机 电脑同步下载 网络摄像头 软件&#xff08…

如何预防数据打架?数据仓库如何保持指标数据一致性开发指南(持续更新)

大数据开发人员最经常遇到尴尬和麻烦的事是,指标开发好了,以为万事大吉了。被业务和运营发现这个指标在不同地方数据打架,显示不同的数值。为了保证指标数据一致性,要从整个开发流程做好。 目录 一、数据仓库架构规划 二、数据抽取与转换 三、数据存储管理 四、指标管…

flex常用固定搭配

flex常用固定搭配 flex简写:flex-grow(项目放大),flex-shrink (项目缩小),flex-basis(项目本身) flex: 1; 全写:flex: 1 1 0%;内容自动放大或缩小占满剩余…

ubuntu20 从源码编译升级到版本5.15.263

author: hjjdebug date: 2024年 10月 25日 星期五 15:38:48 CST description: ubuntu20 从源码编译升级到版本5.15.263 我的内核是 5.15.105, 用apt 下载源码后其版本是5.15.263 为什么要从源码编译内核. 升级内核? 目的: 练练手. 消除内核神秘性. 还可以裁减内核,也是调试内核…

spring整合使用xml方式整合Druid数据源连接池

1.普通的JDBC数据库连接使用 DriverManager 来获取,每次向数据库建立连接的时候都要将 Connection加载到内存中,再验证用户名和密码(得花费0.05s~1s的时间)。需要数据库连接的时候,就向数据库要求 一个,执行完成后再断…

一、Hadoop:大数据处理之基石

Hadoop:大数据处理之基石 于当今数字化时代,数据呈爆炸式增长态势,如何高效地进行海量数据的存储与处理,已然成为企业及科研机构所面临的关键挑战。Hadoop作为一款开源的分布式系统基础架构,在大数据领域发挥着举足轻…

【WIN】WIN10_WSL_Ubuntu18.04_ROS_rviz_docker

WIN10安装WSL Microsoft Store 安装编译套件 sudo apt-get install build-essential apt换源 Debian / Ubuntu 的官方源在国内访问很慢,咱们更换为清华大学 TUNA 的软件源镜像 执行下面命令,备份 apt 安装源: sudo cp /etc/apt/sources.l…

【问题解决】pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

今天配置完poetry环境变量之后pnpm不能用了 具体报错 pnpm : 无法将“pnpm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。 所在位置 行:1 字符: 1pnpm run dev~~~~ Ca…

计算机毕业设计Python+大模型租房推荐系统 租房大屏可视化 租房爬虫 hadoop spark 58同城租房爬虫 房源推荐系统

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 用到的技术: 1. python…

大一物联网要不要转专业,转不了该怎么办?

有幸在2014年,踩中了物联网的风口,坏消息,牛马的我,一口汤都没喝上。 依稀记得,当时市场部老大,带我去上海参加电子展会,印象最深的,一些物联网云平台,靠着一份精美PPT&a…

WEBRTC教程:局域网怎么调试,http://172.19.18.101:8080 ,无法访问摄像头和麦克风,请检查权限

在局域网中使用 WebRTC 时,无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了 getUserMedia API 的使用。如果你在非 localhost 或非 HTTPS 环境下访问网页,浏览器会阻止访问摄像头和麦克风。 解决方案 在局域网中调试 WebRTC 时,你…

2024年项目管理新风向:敏捷开发与瀑布开发,哪个更优?

一、项目管理的多样格局 2024 年,项目管理领域展现出丰富多样的格局。数字化趋势愈发明显,项目管理软件普及度不断提高,据相关资料显示,随着云计算、大数据等技术的成熟,项目管理软件将更加普及,实现项目信…

OpenCV双目相机外参标定C++

基于OpenCV库实现双目测量系统外参标定过程。通过分析双目测量系统左右相机拍摄的棋盘格标定板图像,包括角点检测、立体标定、立体校正和畸变校正的步骤,获取左右相机的相对位置关系和姿态。 a.检测每张图像中的棋盘格角点,并进行亚像素级精…

Python游戏开发超详细(基础理论知识篇)

一、引导: Python游戏开发是一个非常有趣且富有挑战性的领域。通过Python,你可以利用其强大的库和框架来创建各种类型的游戏,从简单的2D游戏到复杂的3D游戏。以下是第一课的基础理论知识,帮助你入门Python游戏开发。 二、理论知识…

使用Prometheus对微服务性能自定义指标监控

背景 随着云计算和容器化技术的不断发展,微服务架构逐渐成为现代软件开发的主流趋势。微服务架构将大型应用程序拆分成多个小型、独立的服务,每个服务都可以独立开发、部署和扩展。这种架构模式提高了系统的可伸缩性、灵活性和可靠性,但同时…

【数据结构和算法】三、动态规划原理讲解与实战演练

目录 1、什么是动态规划? 2、动态规划实战演练 2.1 力扣题之爬楼梯问题 (1)解题思路1: (2)解题思路2: (3)动态规划(DP):解题思路 (4&#x…

ArcGIS必会的选择要素方法(AND、OR、R、IN等)位置选择等

今天来看看ArcGIS中的几个选择的重要使用方法 1、常规选择、 2、模糊查询、 3、组合复合条件查询(AND、OR、IN), 4、空值NULL查询 5、位置选择 推荐学习: 以梦为马,超过万名学员学习ArcGIS入门到实战的应用课程…

前端-基础CSS 知识总结

1.书写位置:title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码。 <title>CSS 初体验</title> <style>/* 选择器 { } */p {/* CSS 属性 */color: red;} </style><p>体验 CSS</p> <link rel="stylesheet" href=…

Pandas模块之垂直或水平交错条形图

目录 df.plot() 函数Pandas模块之垂直条形图Pandas模块之水平交错条形图 df.plot() 函数 df.plot() 是 Pandas 中的一个函数&#xff0c;用于绘制数据框中的数据。它是基于 Matplotlib 库构建的&#xff0c;可以轻松地创建各种类型的图表&#xff0c;包括折线图、柱状图、散点…

【纯血鸿蒙】专项测试工具 DevEco Testing

DevEco Testing 为生态合作伙伴接入 HarmonyOS 生态提供专业的测试服务,共筑高品质的智能硬件产品。 云端服务平台面向开发者提供724 小时的远程多终端真机实验室,提供华为专业的应用安全隐私检测,提供基于华为真机的应用自动化测试。 访问地址:https://devecostudio.huawe…