位置: IT常识 - 正文

React组件的生命周期函数(react组件constructor)

编辑:rootadmin
React组件的生命周期函数 文章目录React组件生命周期认识生命周期生命周期函数不常用生命周期函数React组件生命周期认识生命周期

推荐整理分享React组件的生命周期函数(react组件constructor),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react组件声明,react组件生命周期函数,react组件生命周期嵌套执行顺序,react组件生命周期函数,react组件生命周期的三个阶段,react组件生命周期函数,react组件生命周期三个状态,react组件的生命周期,内容如对您有帮助,希望把文章链接给更多的朋友!

很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期;

React组件也有自己的生命周期,了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能;

生命周期和生命周期函数的关系如下:

生命周期是一个抽象的概念,在生命周期的整个过程,分成了很多个阶段;

比如装载阶段(Mount),组件第一次在DOM树中被渲染的过程;

比如更新过程(Update),组件状态发生变化,重新更新渲染的过程;

比如卸载过程(Unmount),组件从DOM树中被移除的过程;

React内部为了告诉我们当前处于哪些阶段,会对我们组件内部实现的某些函数进行回调,这些函数就是生命周期函数:

比如实现componentDidMount函数:组件已经挂载到DOM上时,就会回调;

比如实现componentDidUpdate函数:组件已经发生了更新时,就会回调;

比如实现componentWillUnmount函数:组件即将被移除时,就会回调;

我们可以在这些回调函数中编写自己的逻辑代码,来完成自己的需求功能;

我们谈React生命周期时,主要谈的类的生命周期,因为函数式组件是没有生命周期函数的;(后面我们可以通过hooks来模拟一些生命周期的回调)

生命周期函数

我们先来学习一下最基础、最常用的五个生命周期函数:

Constructor

组件中第一个调用的生命周期函数, 如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数。

constructor中通常只做两件事情:

通过给 this.state 赋值对象来初始化内部的state;为事件绑定实例(this);

render

render函数也是组件的生命周期函数, 它的使用方法上一篇文章有讲解过, 这里不再过多赘述

componentDidMount

React组件的生命周期函数(react组件constructor)

componentDidMount() 会在组件挂载后(插入 DOM 树中)立即调用。

componentDidMount中通常进行哪里操作呢?

依赖于DOM的操作可以在这里进行;在此处发送网络请求就最好的地方;(官方建议)可以在此处添加一些订阅(会在componentWillUnmount取消订阅);

componentDidUpdate

componentDidUpdate() 会在更新后会被立即调用,首次渲染不会执行此方法。

当组件更新后,可以在此处对 DOM 进行操作;

如果你对更新前后的 props 进行了比较,也可以选择在此处进行网络请求;(例如,当 props 未发生变化时,则不会执行网络请求)。

componentWillUnmount

componentWillUnmount() 会在组件卸载及销毁之前直接调用。

在此方法中执行必要的清理操作;

例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等;

上面这五个生命周期函数是我们最常用的, 它们的执行时机可以参考下面这幅图片

首先执行constructor函数

其次执行render函数, 将render函数的结果进行渲染

紧接着会将组件挂载到DOM上, 挂载完成执行componentDimMount函数

当数据发生改变, 会重新调用render函数, 等待数据更新完成后会调用componentDidUpdate函数

组件卸载或销毁之前, 调用componentWillUnmount

演示代码

export class App extends Component { constructor() { console.log("constructor被调用") super() this.state = { message: "Hello World" } } btnClick() { this.setState({ message: "你好啊" }) } render() { console.log("render被调用") const { message } = this.state return ( <div> <button onClick={() => this.btnClick()}>按钮</button> <h2>{ message }</h2> </div> ) } componentDidMount() { console.log("componentDidMount被调用") } componentDidUpdate() { console.log("componentDidUpdate被调用") } componentWillUnmount() { console.log("componentWillUnmount被调用") }}不常用生命周期函数

除了上面介绍的生命周期函数之外,还有一些不常用的生命周期函数(注意这个不常用不是我说的, 实在React官网中, 官方列举的):

下面三个不常用的生命周期getSnapshotBeforeUpdate和shouldComponentUpdate是相对有用的

getDerivedStateFromProps:state 的值在任何时候都依赖于 props时使用;该方法返回一个对象来更新state;

getSnapshotBeforeUpdate:在React更新DOM之前回调的一个函数,可以获取DOM更新前的一些信息(比如说滚动位置);

shouldComponentUpdate:该生命周期表示, 是否需要重新更新render函数进行渲染, 返回true表示需要, 返回false表示不需要, 这个生命周期函数还是很常用,但是我们等待讲性能优化时再来详细讲解;

另外,React中还提供了一些过期的生命周期函数,这些函数已经不推荐使用。

更详细的生命周期相关的内容,可以参考官网: https://zh-hans.reactjs.org/docs/react-component.html

本文链接地址:https://www.jiuchutong.com/zhishi/300848.html 转载请保留说明!

上一篇:什么是 Web 3.0?(新手入门指南)(什么是男人无力的行为)

下一篇:Python 爬虫案例(python爬虫案例题目)

  • b站怎么发竖屏视频(b站怎么发竖屏弹幕)

    b站怎么发竖屏视频(b站怎么发竖屏弹幕)

  • 魅族18的分辨率是多少(魅族18分辨率ppi)

    魅族18的分辨率是多少(魅族18分辨率ppi)

  • 小米cc9e分辨率低吗(小米cc9屏幕分辨率)

    小米cc9e分辨率低吗(小米cc9屏幕分辨率)

  • 三星s8用一会儿就烫手(三星s8用一会儿就黑屏)

    三星s8用一会儿就烫手(三星s8用一会儿就黑屏)

  • 抖音私信能发多少字(抖音私信能发多大的视频)

    抖音私信能发多少字(抖音私信能发多大的视频)

  • vivo手机红外被异常遮挡怎么办(vivo手机红外被异常遮挡是什么意思)

    vivo手机红外被异常遮挡怎么办(vivo手机红外被异常遮挡是什么意思)

  • 为什么下载微信的时候显示不能现在下载(为什么下载微信在手机页面不显示)

    为什么下载微信的时候显示不能现在下载(为什么下载微信在手机页面不显示)

  • vivo演示机和真机有什么区别(vivo演示机和正常机的价格)

    vivo演示机和真机有什么区别(vivo演示机和正常机的价格)

  • 叫小度小度不说话,怎么回事(叫小度小度不说话了就噔一声)

    叫小度小度不说话,怎么回事(叫小度小度不说话了就噔一声)

  • 爱奇艺为什么叫猕猴桃(爱奇艺为什么叫大厂)

    爱奇艺为什么叫猕猴桃(爱奇艺为什么叫大厂)

  • td scdma是什么网络(td-scdma td-lte)

    td scdma是什么网络(td-scdma td-lte)

  • 支付宝怎样才能得到敬业福(支付宝怎样才能接到大量异地收款)

    支付宝怎样才能得到敬业福(支付宝怎样才能接到大量异地收款)

  • 爱奇艺能看央视直播吗(爱奇艺能看央视三套直播吗现在)

    爱奇艺能看央视直播吗(爱奇艺能看央视三套直播吗现在)

  • 手机关机能查到位置吗(手机关机能查到行程大数据)

    手机关机能查到位置吗(手机关机能查到行程大数据)

  • 手机麦克风怎么设置(手机麦克风怎么打开)

    手机麦克风怎么设置(手机麦克风怎么打开)

  • 鲁通卡手机充值方法(鲁通卡 手机充值)

    鲁通卡手机充值方法(鲁通卡 手机充值)

  • 小爱怎么控制电视(小爱怎么控制电视开机)

    小爱怎么控制电视(小爱怎么控制电视开机)

  • 苹果x有快充功能吗(苹果x有快充功能吗?)

    苹果x有快充功能吗(苹果x有快充功能吗?)

  • usb鼠标灯亮但是没反应(usb鼠标亮一下就灭)

    usb鼠标灯亮但是没反应(usb鼠标亮一下就灭)

  • 电脑音响和耳机同时用(电脑音响和耳机都没声音怎么办)

    电脑音响和耳机同时用(电脑音响和耳机都没声音怎么办)

  • 苹果出现可能不支持此配件(苹果出现可能不支持此配件怎么弄)

    苹果出现可能不支持此配件(苹果出现可能不支持此配件怎么弄)

  • 头条极速版怎样发私信(头条极速版怎样私信已关注的人)

    头条极速版怎样发私信(头条极速版怎样私信已关注的人)

  • 窗函数的介绍以及画出常见窗函数(汉宁窗,矩形窗,汉明窗,布莱克曼窗)的时域图和频谱图(窗函数的作用)

    窗函数的介绍以及画出常见窗函数(汉宁窗,矩形窗,汉明窗,布莱克曼窗)的时域图和频谱图(窗函数的作用)

  • 印花税计入税金及附加还是应交税费
  • 其他综合收益影响递延所得税负债吗
  • 金税四期上线后如何查虚开
  • 销售农产品是否可以抵税
  • 主营业务收入体现在资产负债表哪里
  • 原始凭证和记账凭证的作用分别是什么
  • 如何证明自己是低保户
  • 备用金三栏式明细账图片
  • 免征土地增值税
  • 17税点变更成16税点
  • 折扣零售商是什么意思
  • 原材料暂估分录
  • 出售固定资产取得的收入
  • 财政拨款进项税怎么处理
  • 小规模纳税人税费怎么算
  • 车辆租赁的增值税率
  • 金税服务费会计分录
  • 有质量问题的产品案例
  • 审计调整以前年度投资收益怎么处理
  • macos 关闭屏幕
  • 实收资本属于哪类
  • 跨年冲减无发票怎么入账
  • 高德地图定位获取用户手机号码
  • php splqueue
  • 未能连接到一个windows 的服务win7
  • smart方法的含义和重要性
  • php文件怎么打开运行
  • 税收返还需要缴纳什么税
  • 事业单位长期应付款怎么核销
  • 医院执行政府会计制度补充规定
  • 人工智能示例
  • 一般纳税人能开1%的发票吗
  • 产品体验是什么意思
  • thinkphp怎么用
  • php批量上传图片到服务器
  • 房地产企业建筑成本
  • 开发商需要缴纳保证金
  • python中列表的索引用法
  • python中的logging记录日志
  • sql server 2008数据库
  • 织梦使用教程
  • 注册资金如何使用
  • 营业外支出的内容包括
  • access数据库丢失原因
  • 税控盘维护费280元怎么做账
  • 金税盘电子发票下载失败
  • 本年利润和利润分配有什么区别
  • 注册资本印花税2023年新规定
  • 盈余公积包括哪两个明细科目
  • 一般纳税人开出去的普票可以用进项抵扣吗
  • 其他权益工具投资出售时账务处理
  • 注册资本没有全额投入,公司银行贷款贷款利息怎么入账
  • 少数股东权益如何保障
  • 融资租赁固定资产折旧年限
  • 发票不按实际数量单价开 但金额一致
  • 模具成本核算汇总表
  • 土地出让金抵减销项税计算
  • 老项目简易征收税率
  • 备查账包括哪些
  • win8语言栏不见了 怎么调出来
  • win7系统打开网页出现file not found
  • windows7升级到windows8.1
  • freebsd源代码开放?
  • Win10系统如何利用360压缩软件解决打不开RAR压缩包的问题
  • win7升级win8.1失败
  • dx12最新版本
  • Shell脚本监控linux系统信息
  • jquery实战
  • androidstudio国内镜像地址
  • three.js typescript
  • nodejs 写文件
  • chrome excel
  • javascriptcom
  • android 多页面
  • 西安市经开区管委会官网
  • 钢管租赁可以开建筑材料吗
  • 销售皮棉税率为多少
  • 手撕发票查询真伪平台
  • 乌鲁木齐市公立幼儿园有哪些
  • 资源税从价计征的有哪些
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设