位置: 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爬虫案例题目)

  • 华为手环第一次充电(华为手环第一次使用前是不是需要充电)

    华为手环第一次充电(华为手环第一次使用前是不是需要充电)

  • word文档列宽怎么调(word文档列宽怎么设置厘米)

    word文档列宽怎么调(word文档列宽怎么设置厘米)

  • 找靓机可以分期付款吗(找靓机可以分期买两个手机吗)

    找靓机可以分期付款吗(找靓机可以分期买两个手机吗)

  • 华为芯片有哪些(华为芯片有哪些手机)

    华为芯片有哪些(华为芯片有哪些手机)

  • 一个身份证号可以实名认证几个微信(一个身份证号可以认证几个微信号)

    一个身份证号可以实名认证几个微信(一个身份证号可以认证几个微信号)

  • 华为运动健康本次请求无效(华为运动健康本次请求无效请确认是否具有权限)

    华为运动健康本次请求无效(华为运动健康本次请求无效请确认是否具有权限)

  • 电脑launch是什么(电脑上launch是什么意思)

    电脑launch是什么(电脑上launch是什么意思)

  • 京东买的苹果可以去直营店保修吗(京东买的苹果可以去直营店以旧换新)

    京东买的苹果可以去直营店保修吗(京东买的苹果可以去直营店以旧换新)

  • id连接到服务器时出现问题(id连接服务器出错是什么意思)

    id连接到服务器时出现问题(id连接服务器出错是什么意思)

  • 微信换手机后好友丢失(微信换手机后好友不见了)

    微信换手机后好友丢失(微信换手机后好友不见了)

  • 惠普2600打印机墨盒如何加墨(惠普2600打印机怎么换墨盒)

    惠普2600打印机墨盒如何加墨(惠普2600打印机怎么换墨盒)

  • 手机碎屏使用的危害(手机碎屏使用的什么技术)

    手机碎屏使用的危害(手机碎屏使用的什么技术)

  • 华为手机怎么下两个微信(华为手机怎么下载铃声)

    华为手机怎么下两个微信(华为手机怎么下载铃声)

  • 天猫精灵都可以干什么(天猫精灵都可以听什么故事)

    天猫精灵都可以干什么(天猫精灵都可以听什么故事)

  • 苹果相机用不了,打开一片漆黑(苹果手机相机用不了)

    苹果相机用不了,打开一片漆黑(苹果手机相机用不了)

  • 华为nova5pro能不能开空调(华为nova5pro能不能控制空调)

    华为nova5pro能不能开空调(华为nova5pro能不能控制空调)

  • oppo手机照片如何重命名(oppo手机照片如何传送到电脑)

    oppo手机照片如何重命名(oppo手机照片如何传送到电脑)

  • 手机号以前被别人注册过怎么办(手机号以前被别人用过,经常有骚扰电话)

    手机号以前被别人注册过怎么办(手机号以前被别人用过,经常有骚扰电话)

  • 照片尺寸怎么修改(照片尺寸怎么修改192*144)

    照片尺寸怎么修改(照片尺寸怎么修改192*144)

  • 快手极速版可以发作品吗(快手极速版可以扫码登录吗)

    快手极速版可以发作品吗(快手极速版可以扫码登录吗)

  • 苹果xr有没有指纹(苹果xr有没有指纹付款功能)

    苹果xr有没有指纹(苹果xr有没有指纹付款功能)

  • 3000mah电池能用多长时间(3000mah电池能用66w吗)

    3000mah电池能用多长时间(3000mah电池能用66w吗)

  • word转excel身份证号(word转excel身份证不变)

    word转excel身份证号(word转excel身份证不变)

  • 苹果屏幕时间怎么关闭(苹果屏幕时间怎么设置)

    苹果屏幕时间怎么关闭(苹果屏幕时间怎么设置)

  • 内存条松动导致的故障现象及解决方法是什么?(内存条松动导致黑屏)

    内存条松动导致的故障现象及解决方法是什么?(内存条松动导致黑屏)

  • 超标准能按小规模纳税人标准纳税吗?
  • 公司网站建设费做账是流量应计入
  • 电梯广告租赁属于哪类
  • 股东借款转实收资本需要什么原始凭证
  • 印花税滞纳金怎么算
  • 为什么出现补交税
  • 购置房屋
  • 计提折旧需要减去预计净残值吗
  • 其他综合收益在利润表的哪个位置哪里
  • 报销交通费的会计怎么做
  • 采购差价构成犯罪吗
  • 哪些税费计入应缴税费
  • 个人股东无偿借款给企业
  • 租的厂房再转租怎么开票抵扣
  • 普票每季度开多少免税
  • 人工成本如何申报个税
  • 印花税计提和缴纳凭证
  • 总包劳务工资发什么科目
  • 退租水电费从押金里扣除
  • 补交的城建税怎么账务处理
  • 收回物资的加工成本
  • 个体工商户核定征收标准2023
  • 民办学校的财务制度
  • 高新技术企业研发费加计扣除政策
  • 工伤补贴如何做凭证
  • 登记总账的科目有哪些
  • 乐吾实验学校网站
  • the模板引擎
  • 其他债权投资按公允价值计量,为什么计提减值准备
  • 营业执照上住所和经营场所
  • segment anything model模型 需要的配置
  • vue全家桶介绍
  • vue生命周期钩子函数
  • matlab进行图像处理
  • linux 运行php
  • 2020信息采集
  • 免抵退申报汇总表在哪里
  • 一般纳税人增值税怎么做账务处理
  • 小企业短期借款科目的贷方登记
  • 个人以不动产投资成立一人有限公司
  • python框架的作用
  • mysql性能提升
  • github+hexo搭建博客
  • 小规模增值税减按1%的政策
  • 企业账户在银行买黄金可以开发票吗
  • 外购无形资产的增值税计入成本吗
  • 营业成本怎么理解
  • 暂估入账应该如何操作
  • 员工出差报销的餐费怎么下账
  • 一般纳税人金税盘分录
  • 总资产法怎么计算公式
  • 失控发票补交上年所得税
  • 担保费能否抵扣增值税
  • 应交税费核算规定最新
  • 出库未开发票
  • 免除债务会计处理
  • 银行存款实际余额不足
  • 非营利医疗机构什么意思
  • sql分几类
  • mysql索引数据结构有哪些
  • windows server 2008.
  • windows Server 2008各版本区别详解
  • freebsd安装教程
  • xp系统的电脑无法启动
  • macos使用方法
  • Centos 6.4 安装dnsmasq的方法
  • win8删除文件不提示
  • [置顶]bilinovel
  • shell 整数赋值
  • Android---43---Service之IntentService
  • python对文件操作采用的统一
  • 安卓手机图片缓存在哪
  • 施工企业建筑机械管理机构主要职责是负责建筑机械的
  • 南京国税局长是谁
  • 国家税务总局网站登录入口官网
  • 江苏省发展改革委
  • 一般纳税人资格是什么意思
  • 国税局黑龙江省
  • 发票真伪查询国税官网12366
  • 收到的短信内容是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设