React中的生命周期函数

news2024/11/17 19:32:07

 生命周期的三个阶段:

1.创建时(挂载阶段)

①执行时机:组件创建时(页面加载时)

②执行顺序:constructor()->render()->componentDidMount()

import React, { Component } from 'react'
export default class extends Component {
  constructor(){
    super()
    console.log("constructor");//第一个打印
  }
  componentDidMount(){
    console.log("componentDidMount");//第三个
  }
  render() {
  
    console.log("render");//第二个
    return (
      <div></div>
    )
  }
}

2.更新时(更新阶段)

①执行时机:1.setState()2.forceUpdate()3.组件接收到新的props,这三者任意一种变化,组件就会重新渲染

3.卸载时(卸载阶段)

①执行时机:组件从页面中消失

 不常用生命周期函数

1.static getDerivedStatesFromProps( nextProps, pervState) 静态方法生命周期函数

①执行时机:会在调用render方法之前调用,并且在初始挂载、更新时都会被调用。它应返回一个对象来更新state,如果返回的是null则不更新任何内容。

②使用静态方法,可以强制开发者在render之前只做无副作用的操作,而且能做的操作局限在props和state决定新的state而已。

2.shouldCompontentUpdate(nextProps, nextState) 是否要更新组件时触发的函数

①判断是否需要更新,主要用来优化性能,调用this.forceUpdate会无视这个钩子,强制更新。
可以通过比较this.props和nextProps、this.state和nextState来判断状态是否发生改变;状态发生变化,组件会进入渲染流程,renturn false可以阻止组件更新
②父组件的重新渲染会导致组件重新渲染。可以通过此钩子函数限制子组件是否需要更新。

3.getSnapshotBeforeUpdate(prevProps, prevState) 保存状态快照

①主要用来代替componentWillUpdate生命周期函数。

②执行时机:会在最终的render之前被调用,它与componentDidUpdate函数中的元素状态是一致的

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

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

相关文章

nodejs+vue+elementui共享充电宝管理系统express

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 2 前端技术&#xff1a;nodejsvueelementui 前端&#xff1a;HTML5,CSS3、JavaScript、VUE 功能介绍 管理员&#xff1a;…

H5基本开发2——(HTML文档基本结构)

现实生活中&#xff0c;任何一个文档都是具有一定的格式&#xff0c;不同的文档&#xff0c;基本格式不同&#xff0c;例如&#xff1a;请假条、调休单、剧本、年中总结、十九大报告、等等&#xff0c;而我们所编写等html文档也是具有一定的编写基本格式的 事实上W3C组织一直致…

[附源码]java毕业设计教学辅助系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

TwoModalBERT进行角色分类

你是否遇到过数据集中有多个文本特性的情况?例如&#xff0c;根据消息的上下文正确地对消息进行分类&#xff0c;即理解前面的消息。比如说我们有下面的数据集&#xff0c;需要对其进行分类。 当只考虑message时&#xff0c;你可以看到它的情绪是积极的&#xff0c;因为“incr…

关于电影的HTML网页设计—— 电影小黄人6页 HTML+CSS+JavaScript

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置&#xff0c;有div的样式格局&#xff0c;这个实例比较全面&#xff0c;有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 精彩专栏推荐&#x1f4…

【Pytorch with fastai】第 10 章 :NLP 深入探讨 RNN

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

【JavaScript高级程序设计】重点-第五章笔记:Date、RegExp、原始值包装类、单例内置对象

文章目录基本引用类型1.Date1.1 继承的方法1.2 日期格式化方法1.3 日期/时间组件方法2.RegExp正则表达式2.1 RegExp 实例属性2.2 RegExp 实例方法2.3 RegExp 构造函数属性3.原始值包装类型3.1 Boolean3.2 Number3.3 String3.3.1 JavaScript 字符3.3.2 normalize()方法3.3.3 字符…

AI 实战篇 |十分钟学会【动物识别】,快去寻找身边的小动物试试看吧【送书】

&#x1f3ac; 博客主页&#xff1a;https://xiaoy.blog.csdn.net &#x1f3a5; 本文由 呆呆敲代码的小Y 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f384; 学习专栏推荐&#xff1a;Unity系统学习专栏 &#x1f332; 游戏制作专栏推荐&#xff1a;游戏制作 &…

计算机毕业设计node.js+vue在线日程管理系统

项目介绍 我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,在线日程管理系统被用户普遍使用,为方便用户能够可以随时进行在线管理自己的日程的数据信息,特开发了基于在线日程管理…

【Pytorch with fastai】第 11 章 :使用 fastai 的中级 API 进行数据处理

&#x1f50e;大家好&#xff0c;我是Sonhhxg_柒&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流&#x1f50e; &#x1f4dd;个人主页&#xff0d;Sonhhxg_柒的博客_CSDN博客 &#x1f4c3; &#x1f381;欢迎各位→点赞…

第2关:子节点创建、列出、删除

子节点创建、列出 首先&#xff0c;需要启动服务器&#xff0c;并使用zkCli.sh连接服务器&#xff0c;进入客户端命令行界面&#xff08;如第一关所述&#xff09;。 创建子节点类似于创建新的节点&#xff0c;子节点也具有四种类型的节点。唯一的区别是&#xff1a;子节点的…

redis学习4-list

基本的数据类型&#xff0c;列表,redis命令是不区分大小写的 在redis中&#xff0c;我们可以把list玩成&#xff0c;线&#xff0c;队列&#xff0c;阻塞队列&#xff01; 所有的list命令都是用l开头的 [rootcentos7964 bin]# redis-cli -p 6379 127.0.0.1:6379> LPUSH li…

Oracle Primavera Unifier计划管理器(Planning Manager)

目录 一、前言 二、介绍 一、前言 在计划管理器中&#xff0c;Oracle Primavera Unifier 用户可以计划新项目/外壳和提案&#xff0c;并为已在 Unifier 中运行的项目/外壳创建预测。他们不能像在 Unifier 中管理真实项目/外壳那样管理计划的项目/外壳;但是&#xff0c;他们可…

Observer

一些比较方便的 DOM 监测的 API。 一个 Observer 实例具备的实例方法&#xff1a; observe。向监听的目标集合添加一个元素。unobserve。停止对一个元素的观察。disconnect。终止对所有目标元素的观察。… 一、IntersectionObserver 提供了一种异步检测目标元素与祖先元素或…

图解LeetCode——792. 匹配子序列的单词数(难度:中等)

一、题目 给定字符串 s 和字符串数组 words, 返回 words[i] 中是s的子序列的单词个数 。 字符串的 子序列 是从原始字符串中生成的新字符串&#xff0c;可以从中删去一些字符(可以是none)&#xff0c;而不改变其余字符的相对顺序。 例如&#xff0c; “ace” 是 “abcde” 的…

css3对页面打印设置的一些特殊属性,如@page,target-counter等

公司内部应业务需求&#xff0c;需要将html生成pdf并能打印&#xff0c;前后台都各有方式&#xff0c;这里综合比较选择用java去生成&#xff0c;避免了前端生成带来的诸多问题&#xff0c;后台用的框架是 iTextPdf 但是在做的同时发现用iText实现的pdf生成和公司的业务需要生成…

Spring学习第6篇: 基于注解使用IOC

大家家好&#xff0c;我是一名网络怪咖&#xff0c;北漂五年。相信大家和我一样&#xff0c;都有一个大厂梦&#xff0c;作为一名资深Java选手&#xff0c;深知Spring重要性&#xff0c;现在普遍都使用SpringBoot来开发&#xff0c;面试的时候SpringBoot原理也是经常会问到&…

【数据链路层】封装成帧和透明传输和差错控制

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录前言链路层功能功能封装成帧和透明传输组帧的四种方法透明传输差错控制检错编码差错链路层的差错控制检错编码纠错编码链路层代码实现&#x1f343;博主昵称&#xff1a;一拳必胜客 &#x1f338;博主寄语&a…

27.gateway的限流实战(springcloud)

1 什么是限流 通俗的说&#xff0c;限流就是限制一段时间内&#xff0c;用户访问资源的次数&#xff0c;减轻服务器压力&#xff0c;限流大致分为两种&#xff1a; 1. IP 限流&#xff08;5s 内同一个 ip 访问超过 3 次&#xff0c;则限制不让访问&#xff0c;过一段时间才可继…

E-Prime心理学实验设计软件丨产品简介

拖放设计 通过将对象拖放到时间轴上来构建文本、图像、声音和视频的实验。利用我们的实验库中的免费模板和预建实验。 计时精度 E-Prime 3.0 将计时精度报告到毫秒精度级别。请务必使用我们的测试工具来确认您的计算机硬件能够进行关键计时。将Chronos添加到您的研究设置中&a…