React 16.8+生命周期(新)

news2024/11/25 16:30:40

React16之后有三个生命周期被废弃:

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

React 16.8+的生命周期分为三个阶段,分别是挂载阶段、更新阶段、卸载阶段。

挂载阶段:

  • constructor:构造函数,最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this
  • getDerivedStateFromProps: static getDerivedStateFromProps(nextProps, prevState),这是个静态方法,当我们接收到新的属性想去修改state,可以使用
  • render:render函数是纯函数,只返回需要渲染的东西,不应该包含其它的业务逻辑,可以返回原生的DOM、React组件、Fragment、Portals、字符串和数字、Boolean和null等内容
  • componentDidMount:组件装载之后调用,此时可以获取到DOM节点并操作,比如对canvas,svg的操作,服务器请求,订阅都可以写在这个里面,但是记得在componentWillUnmount中取消订阅。

更新阶段

  • getDerivedStateFromProps:此方法在更新和挂载阶段都会调用
  • shouldComponentUpdate:shouldComponentUpdate(nextProps, nextState),有两个参数nextPropsnextState,表示新的属性和变化之后的state,返回一个布尔值,true表示会触发重新渲染,false表示不会触发重新渲染,默认返回true,我们通常利用此生命周期来优化React程序性能
  • render:更新阶段也会触发此生命周期
  • getSnapshotBeforeUpdate:getSnapshotBeforeUpdate(prevProps, prevState),这个方法在render之后,componentDidUpdate之前调用,有两个参数prevPropsprevState,表示之前的属性和之前的state,这个函数有一个返回值,会作为第三个参数传给componentDidUpdate,如果你不想要返回值,可以返回null,此生命周期必须与componentDidUpdate搭配使用
  • componentDidUpdate:componentDidUpdate(prevProps, prevState, snapshot),该方法在getSnapshotBeforeUpdate方法之后被调用,有三个参数prevPropsprevStatesnapshot,表示之前的props,之前的state,和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态,则将对比或计算的过程迁移至getSnapshotBeforeUpdate,然后在 componentDidUpdate中统一触发回调或更新状态。

卸载阶段

  • componentWillUnmount:当组件被卸载或者销毁了就会调用,我们可以在这个函数里去清除一些定时器,取消网络请求,清理无效的DOM元素等垃圾清理工作。 

 

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

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

相关文章

【元胞自动机】基于元胞自动机模拟考虑心理策略的人员疏散附matlab代码

✅作者简介:热爱科研的Matlab仿真开发者,修心和技术同步精进,matlab项目合作可私信。 🍎个人主页:Matlab科研工作室 🍊个人信条:格物致知。 更多Matlab仿真内容点击👇 智能优化算法 …

2022-12-13 工作记录--Vue/JS-音乐的播放与关闭

Vue/JS-音乐的播放与关闭 一、音频资源 音频资源的位置如下:👇🏻 二、代码 App.vue 注意点: 1、若切换了音频资源,则需要在 播放音乐前 重新加载资源——见代码里的 myAuto?.load();2、若切换了页面&…

论文学习——秦淮河水文水动力模型及实时校正

文章目录摘要0 引言1 模型构建1.1 流域概况及资料收集1.2 河道一维水流模拟1.3 边界条件处理1.3.1 流量上边界计算1.3.2 水文下边界处理1.4 节点堰闸流量计算2 实时校正方法2.1 KNN 法2.2 反馈法3 模拟及校正结果4 结论作者:孙文宇、姚成、刘志雨 期刊:《…

Allegro如何编辑过孔的封装参数操作指导

Allegro如何编辑过孔的封装参数操作指导 Allegro可以快捷的编辑过孔的封装,具体操作如下 以编辑这个via的封装为例 用Candence安装目录下面的pad_designer打开过孔的pad封装 打开后的效果如下图 如果需要改成钻孔8mil的孔,只需要在Drill diameter把10改成8即可 钻孔尺寸…

一比一手写迷你版vue,彻底搞懂vue运行机制

前言 现在前端面试Vue中都会问到响应式原理以及如何实现的,如果你还只是简单回答通过Object.defineProperty()来劫持属性可能已经不够了。 本篇文章通过学习文档及视频教程实现手写一个简易的Vue源码实现数据双向绑定,解析指令等。 几种实现双向绑定的…

好物安利:老照片修复软件哪个好?

大家都知道,老照片承载了很多的回忆,还有许多见证了城市的变迁及发展。甚至可以说,那些老照片,每一张都蕴藏着一个故事,能还原一段历史。但这些老照片,或多或少因为之前的设备、或储存不当等问题&#xff0…

【Docker】Docker安装Redis,并配置数据备份同步到宿主机

专栏精选文章 《Docker是什么?Docker从介绍到Linux安装图文详细教程》《30条Docker常用命令图文举例总结》《Docker如何构建自己的镜像?从镜像构建到推送远程镜像仓库图文教程》《Docker多个容器和宿主机之间如何进行数据同步和数据共享?容器…

Spring:Aop

目录 一、Aop简介 AOP相关术语 二、使用AOP 一、Aop简介 AOP(Aspect Oriented Programming)面向切面编程,一种编程范式,指导开发者如何组织程序结 构 原理:将复杂的需求分解出不同方面,将散布在系统中的公共功能集中解决 …

MEE: A Novel Multilingual Event Extraction Dataset 论文解读

MEE: A Novel Multilingual Event Extraction Dataset paper:[2211.05955] MEE: A Novel Multilingual Event Extraction Dataset (arxiv.org) code:None 期刊/会议:EMNLP 2022 摘要 事件抽取(EE)是信息抽取&#…

OS_用户层的IO软件@缓冲区@磁盘高速缓存@异步IO

文章目录OS_用户层的IO软件缓冲区磁盘高速缓存异步IO用户层的IO软件🎈1.系统调用2.库函数高速缓存与缓冲区磁盘高速媛存(Disk Cache)缓冲区Buffer缓冲的用途设备速度的巨大差异🎈缓冲和缓存的比较联系区别缓冲区的结构缓冲的引入单缓冲区和双缓冲区单缓冲…

万应视野|蔡鑫莹:One in All,低代码平台从工具向商业的转变

2015年,AI、5G、大数据、云计算等前沿技术开始崭露头角,软件再出发、工业互联网等相关政策逐渐出台,云畅的悠悠创业路自此竟也走过了8年。 风华绝代总爱乱世生。2020年,百年变局与世纪疫情交织,经济全球化遭遇逆流&…

倾斜摄影模型数据在gis中的应用

倾斜摄影是近年来航测领域逐渐发展起来的新技术,可同时获得同一位置多个不同角度的、具有高分辨率的影像,采集丰富的地物侧面纹理及位置信息,批量建立高质量、高精度的三维GIS模型,对市政、轨道交通、水利水电、智慧城市等各工程领…

一个简单的HTML篮球网页【学生网页设计作业源码】

🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (10…

大比分领先!ACCV 2022 国际细粒度图像分析挑战赛冠军方案

写在前面 在刚刚结束的 ACCV 2022 国际细粒度图像分析挑战赛中,我们团队在 133 支参赛队伍中脱颖而出,在 Leadboard-B 上以 2.5 的绝对优势取得冠军。 比赛成绩截图 在比赛过程中,我们使用了一些对细粒度分类十分有效的解决方案。 例如&am…

服务器渲染技术-->Thymeleaf

目录 一.基本介绍 1.Thymeleaf 是什么 2.Thymeleaf 的优点 3. Thymeleaf 的缺点 二.Thymeleaf 机制说明 三.Thymeleaf 语法 1. 表达式 1. 表达式一览 2. 字面量 3. 文本操作 2.运算符 1. 数学运算 2. 布尔运算 3. 比较运算 4. 条件运算 3.th 属性 4.迭代 5.条…

PLC模拟量传输过程

网上对PLC模拟量的一些解释含糊不清,令参考人疑惑重重,搞不懂现场—>PLC—>上位机的过程走向。 . 应该了解什么是数字量?什么是模拟量?下面是我的理解。 数字量:没有单位,表示一个数字,0~…

Linux-iNode-软硬链接

文章目录inode磁盘了解站在OS角度磁盘就是线性结构如何确认inode和后面的那个block相关联呢?如何在大的inode Table中安排一个新文件的inode?目录下创建文件的过程都发生了什么软硬链接软链接:特别像快捷方式使用场景硬链接二者区别:硬链接有…

nodejs+vue+element+eachers构建开源项目大型连续剧(1)搭建nodejs服务器

在前端开发过程中,可能某些时候需要自己搭建一台服务器用于一些文件图片请求或者进行后端相关知识的学习。本文主要讲解如何通过nodejs进行一个基础服务器的搭建,包括如何将文件布置的服务器,以及基础接口的开发。后面可能会更新关于通过node…

从根源帮助改变数据延误, Qlik 辅助金融行业实现信贷渠道预测

信贷行业面临的业务挑战 传统方式下,营利性增长和正确管理信贷组合风险的能力是通过静态报告和电子表格完成的,不仅数据单独进行汇总,同时交付过程也存在延迟。这种情况导致组织不得不基于不完整的信息来制定关键的信贷和定价决策。信贷员需…

研发中台拆分过程的一些心得总结

背景在 21 年,中台拆分在 21 年,以下为中台拆分的过程心得,带有一定的主观,偏向于中小团队中台建设参考(这里的中小团队指 3-100 人的团队),对于大型团队不太适用,毕竟大型团队人中 …