React组件的生命周期函数

news2025/7/17 10:52:50

文章目录

    • React组件生命周期
      • 认识生命周期
      • 生命周期函数
      • 不常用生命周期函数

React组件生命周期

认识生命周期

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

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

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

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

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

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

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

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

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

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

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

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

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


生命周期函数

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

Constructor

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

constructor中通常只做两件事情:

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

render

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

componentDidMount

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

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

  1. 依赖于DOM的操作可以在这里进行;
  2. 在此处发送网络请求就最好的地方;(官方建议)
  3. 可以在此处添加一些订阅(会在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官网中, 官方列举的)

  • 下面三个不常用的生命周期getSnapshotBeforeUpdateshouldComponentUpdate是相对有用的

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

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

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

在这里插入图片描述

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

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

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

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

相关文章

controller层,service层,mapper层,entity层的作用与联系。

一. controller层 controller层是用来接受前台数据和返回页面请求信息的&#xff0c;Controller层是不允许直接操作数据库的&#xff01;它就像一个服务员&#xff0c;哪桌客人需要点菜了&#xff0c;就喊一声服务员&#xff01; 对应的&#xff0c;外界需要完成什么样的业务&…

Css 弹性布局(Flex)详细介绍(Flex 属性详解、场景分析)

目录​​​​​​​ 前言 Flex 布局是什么&#xff1f; Flex 简介 Flex 容器属性 Flex 基本使用 场景一 flex-direction 场景二 justify-content align-items flex-wrap 场景三 前言 我们知道&#xff0c;网页展示就好比一个个盒子堆叠在一起&#xff0c;通过调整…

2022版完整版web前端学习路线图(超详细自学路线)

跟着路线图认真坚持学习从前端小白到大神不是梦&#xff0c;0基础看这一篇足矣&#xff01; 学们记得加关注点赞收藏&#xff0c;自学路上不迷糊&#xff01; 零基础小白自学前端路线图速览&#xff1a; 阶段一&#xff1a;核心基础入门 前端计算机常识 ➾ htmlcss基础 ➾ h…

JDBC 连接 MySQL

哈喽~大家好&#xff0c;这次我们来看看 JDBC 如何 连接 MySQL. 目录 一、开头 二、介绍 1、JDBC 的概念 2、JDBC 的功能 3、JDBC 的常用接口和类 三、数据库的创建&#xff08;MySQL&#xff09; 1、连接 MySQL (1)、注册驱动 (2)、获取连接 (3)、获取执行者连接 …

猿创征文|超实用的前端开发工具分享

&#x1f373;作者&#xff1a;贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛\color{#FF0000}{贤蛋 大眼萌 &#xff0c;一名很普通但不想普通的程序媛}贤蛋大眼萌&#xff0c;一名很普通但不想普通的程序媛&#x1f933; &#x1f64a;语录&#xff1a;多一些不为什么的…

Element UI 及 Element Plus框架

一&#xff0c;何为Element UI 及 Element Plus&#xff1f; 它们是前端框架。它是包含很多有自己风格的组件库。 Element目前有两个版本&#xff1a;element-ui 及 element-plus两个版本。它将HTML的基础控件进行了封装&#xff0c;用户只需要调用这些控件就可以了。而不需要…

实验一 基于CSS+HTML+JS开发简单个人网站

目录&#xff1a; 实验要求 实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容 总结 实验要求 实验一 基于CSSHTMLJS开发简单个人网站 实验学时&#xff1a;4 实验类型&#xff1a;设计 一、目的与任务 目的&#xff1a;熟悉在静态网…

Vue3-Pinia的基本使用

什么是Pinia呢&#xff1f; Pina开始于大概2019&#xff0c;是一个状态管理的库&#xff0c;用于跨组件、页面进行状态共享&#xff08;这和Vuex、Redux一样&#xff09;,用起来像组合式API&#xff08;Composition API&#xff09; Pinia和Vuex的区别 PInia的最初是为了探索…

web期末作业网页设计——我的家乡(网页源码)

作品介绍 1.网页作品简介方面 &#xff1a;HTML网站模板。主要有&#xff1a;首页 家乡简介 风景名胜 特色美食 站长介绍 在线调查 等总共 6 个页面html下载。 2.网页作品编辑&#xff1a;此作品为学生个人主页网页设计题材&#xff0c;代码为简单学生水平 htmlcss 布局制作&am…

超详细的VSCode下载和安装教程以及解决VSCode下载速度特别慢的问题

文章目录1. 引言2. 下载VSCode3. 解决VSCode下载速度特别慢4. 安装VSCode1. 引言 今天用WebStorm运行前端代码时&#xff0c;发现不太好打断点。 于是&#xff0c;打算改用VSCode来运行前端代码&#xff0c;但前提是要安装VSCode&#xff0c;如下便是超详细的VSCode安装教程以…

小程序中使用echarts(硬货,全网最详细教程!)

echarts是一个基于JS的数据可视化图标库&#xff0c;它提供了直观&#xff0c;生动&#xff0c;可交互&#xff0c;可个性定制的数据可视化图表。一般在vue中会使用到&#xff0c;并且官网也详细的说明了如何在vue中使用&#xff0c;但是今天我想来探讨的是&#xff0c;如何在微…

你评论,我赠书~【哈士奇赠书 - 15期】〖HTML5+CSS3+JavaScript从入门到精通(微课精编版)(第2版)〗等你来拿

文章目录❤️‍&#x1f525; 赠书活动 - 《HTML5CSS3JavaScript从入门到精通&#xff08;微课精编版&#xff09;&#xff08;第2版&#xff09;》❤️‍&#x1f525; 编辑推荐❤️‍&#x1f525; 抽奖方式与截止时间❤️‍&#x1f525; 赠书活动 → 获奖名单❤️‍&#x…

Parsing error: No Babel config file detected for xxx Either disable config file checking...报错解决方法

Parsing error: No Babel config file detected for xxx Either disable config file checking…报错解决方法 使用Vue3创建项目&#xff0c;创建完成后发现会报错&#xff0c;如下图&#xff1a; 翻译了一下&#xff0c;其实已经告诉我们解决方法了&#xff1a; Either disa…

node.js中Express简介

Express简介 1.什么是Express 官方给出的概念&#xff1a;Express是基于Node.js平台&#xff0c;快速、开放、极简的web开发框架。 通俗理解&#xff1a;Express的作用和Node.js内置的http模块类似&#xff0c;是专门用来创建web服务器的 Express的本质&#xff1a;就是一个n…

CSS设置背景颜色透明的两种方法

在css中设置背景颜色透明的方法有两种&#xff1a; 一种是通过rgba方法设置&#xff0c;另一种是通过backgroundh和opacity设置 下面分别是css中 两种方法实现的背景颜色透明实例 1&#xff0c;通过background和opacity设置背景颜色透明 background属性中属性值比较简单…

Vue+ELementUI主页布局----侧边栏布局(el-aside)

第一节Login.vue登录表单知识&#xff1a; Element-UIvue实现登录表单_我爱布朗熊的博客-CSDN博客 具体Element-UI地址&#xff1a; Element - The worlds most popular Vue UI framework 目录 一、布满整个页面 二、主页Header布局 三、主页左侧带单布局 四、axios请求…

前端练手项目合集40.0个,附源码,2022年最新

今天分享40个博主平时收集整理的前端练手项目&#xff0c;都是一些适合前端新手的小项目合集。 1、【网易云音乐首页制作】 2、【实战项目之今日头条】 3、【实战项目之拉勾网】 4、【ReactNative项目之美食APP】 5、【uni-APP项目实战教程】 6、【React项目管理后台系统】 7、…

uni-app 怎么实现路由拦截

前言 随着业务的需求&#xff0c;项目需要支持H5、各类小程序以及IOS和Android&#xff0c;这就需要涉及到跨端技术&#xff0c;不然每一端都开发一套&#xff0c;人力成本和维护成本太高了。团队的技术栈主要以Vue为主&#xff0c;最终的选型是以uni-appuview2.0作为跨端技术…

vue中实现路由跳转的三种方式(超详细整理)

vue中实现路由跳转的三种方式 一、使用vue-router vue-router 本质是一个第三方的包 用的时候需要下载 步骤 &#xff08;7步法 &#xff09;&#xff1a; 下载vue-router模块到当前工程 yarn add vue-router在main.js中引入VueRouter函数 // 引入路由 import VueRouter from…

【TypeScript】TS 看这一篇就够了

文章目录&#x1f9d1;‍&#x1f4bb;TypeScript基本概念TypeScript 是什么&#xff1f;为什么要有typescript安装编译 TS 的工具包编译并运行 TS 代码创建基于TS的vue项目&#x1f9d1;‍&#x1f4bb;TypeScript基础类型注解TypeScript类型概述TypeScript原始数据类型数组类…