当前位置: 首页 > news >正文

useEffect简单介绍

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与生命周期 

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

useEffect究竟什么时候运行?

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

 ​​

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

cleanUp 函数

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

 cleanUp函数的使用


http://www.mrgr.cn/news/58846.html

相关文章:

  • 二叉树的基本概念及运用
  • Spring Cloud微服务:构建现代应用的新基石
  • ECharts饼图-基础饼图,附视频讲解与代码下载
  • 批量修改YOLO格式的标注类别
  • STM32 从0开始系统学习 1
  • 这是一篇vue3 的详细教程
  • USB上传文件到LINUX系统
  • EveryoneNobel:为每个人打造诺贝尔奖风格的纪念图片
  • UART通过DMA接收和发送,使用环形缓冲区,状态机的使用
  • 使用 Kibana 将地理空间数据导入 Elasticsearch 以供 ES|QL 使用
  • 线性表之顺序表
  • 最新版本jdbcutils集成log4j做详细sql日志、自动释放连接...等
  • apt-cache工具
  • 为什么需要weak_ptr
  • Debezium日常分享系列之:使用Debezium检测数据变异模式
  • 【C/C++ Qt shared_ptr | make_shared | QSharedPointer 】绕圈圈
  • vue3学习(一)项目搭建
  • Depcheck——专门用于检测 JavaScript 和 Node.js 项目中未使用依赖项的工具
  • 自然语言处理实战:《七剑下天山》文本分析
  • Github关于LLM热门项目(10k+)
  • WebForms DataList 控件深入解析
  • Matlab数字信号处理——基于改进小波变换的图像去噪方法(7种去噪算法)
  • 【C++】抱C++中的函数式编程:使用`std::function`和Lambda表达式简化代码
  • Next.js + Prisma + Auth.js 实现完整的认证方案
  • 一篇文章告诉你什么是BloomFilter
  • 【网络安全初识】——互联网发展史