当前位置: 首页 > news >正文

React 学习系列: 类组件生命周期方法

类组件生命周期方法

  • constructor

    在类组件挂载的时候调用,用于构建一个类组件实例。

    在构建类组件实例的时候, 会先执行基类构造函数( React.Component ) 使用父组件传入的 props 来初始化 props 属性, 然后执行自定义构造函数来初始化 state 和 事件绑定。 如果类组件不需要初始化 state 和 事件绑定,就不需要自定义构造函数。

    父组件的 constructor 先触发, 子组件的 constructor 后触发。兄弟组件, constructor 按组件位置的先后顺序按序触发

  • componentWillMount

    挂载阶段, 组件实例构建完成(props、state 属性初始化完成)以后,render 方法执行之前执行。

    如果类组件提供了 getDerivedStateFromProps 方法, componentWillMount 不会触发,会抛出警告。

    父组件的 componentWillMount 先触发, 子组件的 componentWillMount 后触发。兄弟组件, componentWillMount 按组件位置的先后顺序按序触发。

  • static getDerivedStateFromProps(props, state)

    挂载(mount)/更新(update)阶段,在类组件实例的 state、props 属性初始化(更新)完成以后,render 方法执行以前执行。

    执行时, 会传入当前 props 和 state,返回一个新的 state 来更新 state。

    如果类组件实例没有定义 state 属性, 使用 getDerivedStateFromProps 会抛出警告

    getDerivedStateFromProps 返回的 state 会和组件原来的 state 做合并更新处理(Object.assign)。如果返回 null 或者没有返回值, 会抛出警告。

    父组件的 getDerivedStateFromProps 先触发, 子组件的 getDerivedStateFromProps 后触发。兄弟组件, getDerivedStateFromProps 按组件位置的先后顺序按序触发。

    getDerivedStateFromProps 先于 shouldComponentUpdate 触发,即只要组件挂载、组件更新、父组件更新, 都会触发。

  • shouldComponentUpdate(newProps, newState, newContext)

    更新阶段,如果组件不是强制更新且定义了 shouldComponentUpdate 方方法, shouldComponentUpdate 方法会触发。

    shouldComponentUpdate 执行时, 需要传入 newrops、newState、newContext 和 组件实例原来的 props、state、context 做比较,然后根据比较结果返回一个 boolean 类型的值。

    如果返回 false, 组件不需要更新, componentWillUpdate、 render 、componentDidUpdate 都不会触发; 如果返回 true, 组件需要更新, componentWillUpdate、render、componentDidUpdate 都会触发。

    PureComponent 有内置的 shouldComponentUpdate, 会对新旧 props、 state 做浅层比较。如果 props、state 的结构比较复杂, 比较结果可能会不准确

    如果需要强制更新, shouldComponentUpdate 不会触发

    父组件的 shouldComponentUpdate 先触发, 子组件的 shouldComponentUpdate 后触发。兄弟组件, componentWillUpdate 按组件位置的先后顺序按序触发。

  • componentWillUpdate

    更新阶段,在获取 newProps、newState、newContext 以后,组件实例的 props、state、 context 更新以及render 方法执行之前执行。

    如果类组件提供了 getDerivedStateFromProps 方法, componentWillUpdate 不会触发,会抛出警告。

    父组件的 componentWillUpdate 先触发, 子组件的 componentWillUpdate 后触发。兄弟组件, componentWillUpdate 按组件位置的先后顺序按序触发。

  • componentWillReceiveProps(newProps, newContext)

    更新阶段, 如果子组件的 props(或者 context) 发生变化且定义了 coponentWillReceiveProps, 会触发 componentWillReveiveProps 的执行。

    componentWillReceiveProps 在获取 newProps、newState、newContext 以后,组件实例的 props、state、 context 更新以及 render 方法执行之前执行。

    如果类组件提供了 getDerivedStateFromProps 方法, componentWillReceiveProps 不会触发,会抛出警告。

    componentWillReceiveProps 先于 shouldComponentUpdate、 componentWillUpdate 执行。

    父组件的 componentWillReceiveProps 先触发, 子组件的 componentWillReceiveProps 后触发。兄弟组件, componentWillReceiveProps 按组件位置的先后顺序按序触发。

    只有子组件的 props、 context 发生变化, 才会触发 componentWillReceiveProps。 通过 setState 触发子组件更新时, 不会触发 componentWillReceiveProps

    在 componentWillReceiveProps 中修改 state ,不要直接修改,要使用 setState 修改, 否则会抛出警告。

  • render

    将类组件 template 转化为一颗 react element tree。

    在挂载阶段肯定会触发。在更新阶段,如果是强制更新或者没有定义 shouldComponentUpdate, 会触发;如果不是强制更新且定义了 sholdComponentUpdate, 会根据 shouldComponentUpdate 的返回值来决定是否触发,false 不触发, true 触发。

  • componentDidMount

    挂载阶段, 整个 react 应用对应的 template 已经转化为 dom 节点, 并添加到容器 dom 节点以后调用。

    子组件的 componentDidMount 先触发, 父组件的 componentDidMount 后触发。兄弟组件, componentDidMount 按组件位置的先后顺序按序触发。

    componentDidMount 触发的时候, 可以操作 dom 节点, ref 也已经初始化成功

  • getSnapshotBeforeUpdate(preProps, prevState)

    更新阶段调用。此时整个 react 应用对应的 template 已经转化为 dom 节点, 但是还没有添加到容器 dom 节点中。

    getSnapshotBeforeUpdate 的返回值会作为 componentDidUpdate 的第三个参数。

    getSnapshotBeforeUpdate 先于 componentDidUpdate 执行。

    子组件的 getSnapshotBeforeUpdate 先触发, 父组件的 getSnapshotBeforeUpdate 后触发。兄弟组件, getSnapshotBeforeUpdate 按组件位置的先后顺序按序触发。

    componentDidUpdate 触发的时候, 不可以操作新的 dom 节点。

  • componentDidUpdate(prevProps, prevState, snapshot)

    更新阶段, 整个 react 应用对应的 template 已经转化为 dom 节点, 并添加到容器 dom 节点以后调用。

    触发的时候, 会传入 oldProps、 oldState。

    子组件的 componentDidUpdate 先触发, 父组件的 componentDidUpdate 后触发。兄弟组件, componentDidUpdate 按组件位置的先后顺序按序触发。

    componentDidUpdate 触发的时候, 可以操作新的 dom 节点, ref 也已经初始化成功

    不要在 componentDidUpdate 直接使用 setState,否则会导致死循环

  • componentWillUnmount

    更新阶段, 组件卸载及销毁之前直接调用。

    调用时,组件对应的 dom 节点还没有移除。

    componentWillUnmount 触发以后, componentDidiUpdate 就不会触发了

相关文章:

React 学习系列: 类组件生命周期方法

类组件生命周期方法 constructor 在类组件挂载的时候调用,用于构建一个类组件实例。 在构建类组件实例的时候, 会先执行基类构造函数( React.Component ) 使用父组件传入的 props 来初始化 props 属性, 然后执行自定义构造函数来初始化 state…...

Flume从入门到精通一站式学习笔记

文章目录 什么是FlumeFlume的特性Flume高级应用场景Flume的三大核心组件Source:数据源channelsink Flume安装部署Flume的使用案例:采集文件内容上传至HDFS案例:采集网站日志上传至HDFS 各种自定义组件例如:自定义source例如&#…...

Python150题day08

2.基础语法篇 2.1 if 条件句 ①单个条件分支 使用input函数接收用户的输入,如果用户输入的整数是偶数,则使用print函数输出"你输入的整数是:{value],它是偶数”,[value]部分要替换成用户的输入。 解答: value input("请输⼊⼀…...

正则表达式的修饰符

正则表达式的修饰符是用来修改和调整正则表达式的特殊字符或元字符。修饰符可以改变正则表达式的行为和匹配方式。以下是一些常见的正则表达式修饰符: g(全局):表示全局匹配,即在整个字符串中搜索所有匹配项&#xff…...

从行车记录仪恢复已删除/丢失视频的方法

“我的车里有行车记录仪。几天前,当我下班回家时,一辆卡车不知从哪里冒出来撞向了我。我们的两辆车都损坏了,但幸运的是,没有人受伤。我曾与卡车司机就修理我的汽车进行过会面,但他说我有错。我需要查看我的行车记录仪…...

TypeScript_抓取酒店价格数据

我们导入所需的库,包括http和request。然后,我们定义一个函数,该函数接受一个URL作为参数。 import http from http; import request from request;const fetchHotelPrices (url: string) > {// ... }接下来,我们使用request…...

vue前端实现多个url下载并合并为zip文件

一、安装 npm install jszip npm install file-saver 二、引入 import axios from axios import JSZip from "jszip"; import FileSaver from "file-saver"; 三、核心代码 videoData:[/video/26519f026fc012521605563015227403.mp4,/video/f7b9cdae14…...

Redis02-持久化策略

目录 RDB(Redis DataBase Backup file) RDB执行原理 AOF(Append-Only File) RDB和AOF对比 Redis支持多种持久化方式,以确保数据在内存中持久存储,以便在Redis服务器重启时数据不会丢失。Redis中持久化的…...

Crypto(9)[MRCTF2020]keyboard

下载题目,看看里面是什么 这是什么鬼,由题目可以获得线索,keyboard,不是键盘吗,然后看了看别人写的wp,发现是九键,有几个数字对应的密文就是第几个字母 比如第一个6,对应的字母是mno&#xff0c…...

IOS自带的OCR识别功能

一、识别身份证 interface IDCardScanViewController () <AVCaptureMetadataOutputObjectsDelegate> property (nonatomic, strong) AVCaptureSession *captureSession; end implementation IDCardScanViewController - (void)viewDidLoad { [super viewDidLoad…...

1300*C. Product of Three Numbers(质数数学)

Problem - 1294C - Codeforces 解析&#xff1a; 首先这个数肯定不是质数&#xff0c;然后找到第一个因子p&#xff0c;对于n/p再判断质数&#xff0c;然后找到另外两个因子即可。 注意三个因子不能相同。 #include<bits/stdc.h> using namespace std; #define int long…...

【网络】五中IO模型介绍 + 多路转接中select和poll服务器的简单编写

高级IO 前言正式开始前面的IO函数简单过一遍什么叫做低效的IO钓鱼的例子同步IO和异步IO五种IO模型阻塞IO非阻塞IO信号驱动多路转接异步IO 小结 代码演示非阻塞IO多路转接select介绍简易select服务器timeout 为 nullptrtimeout 为 {0, 0}timeout 为 {5, 0}调用accept select编写…...

Camtasia2024破解版电脑屏幕录制剪辑软件

屏幕录制剪辑 TechSmith Camtasia for Mac v2021是 TechSmith 公司所开发出一款专业屏幕录像和编辑&#xff0c; Camtasia Studio2024版是由TechSmith公司官方进行汉化推出的最新版本,除2023版以下版本均没有官方汉化。 同时TechSmith公司打击第三方贩卖Camtasia Studio汉化的…...

c语言进阶部分详解(《高质量C-C++编程》经典例题讲解及柔性数组)

上篇文章我介绍了介绍动态内存管理 的相关内容&#xff1a;c语言进阶部分详解&#xff08;详细解析动态内存管理&#xff09;-CSDN博客 各种源码大家可以去我的github主页进行查找&#xff1a;唔姆/比特学习过程2 (gitee.com) 今天便接“上回书所言”&#xff0c;来介绍《高质…...

Unreal PythonScriptPlugin

Unreal PythonScriptPlugin 文章目录 Unreal PythonScriptPluginPython vs UnLua官方文档PyStubDoString 示例代码&#xff0c;引擎里有很多插件已经用 py 写编辑器脚本了 unreal.get_editor_subsystem(unreal.LevelEditorSubsystem).load_level("/Game/maps/UVlayoutTes…...

什么是数据可视化,为什么数据可视化很重要?

数据可视化是数据的图形表示&#xff0c;可以帮助人们更轻松地理解和解释复杂的信息。它涉及创建数据的视觉表示&#xff0c;例如图表、图形、地图和其他视觉元素&#xff0c;以传达数据中的见解、模式和趋势。数据可视化是将原始数据转化为可操作知识的关键工具。 以下是数据…...

chatgpt相关问题解答

1. openAI的chatgpt的收费方式有哪几种&#xff1f; 根据OpenAI官方的信息&#xff0c;ChatGPT的收费方式包括两种&#xff1a; 1.订阅计划&#xff08;Subscription Plan&#xff09;&#xff1a;OpenAI提供了ChatGPT Plus订阅计划&#xff0c;每月收费20美元。订阅计划的用…...

nssm将exe应用封装成windows服务

一、简介 NSSM&#xff08;Non-Sucking Service Manager&#xff09;是一个用于在Windows操作系统上管理和运行应用程序作为服务的工具。它提供了一种简单的方法来将任意可执行文件转换为Windows服务&#xff0c;并提供了一些额外的功能和配置选项。 优点&#xff1a; 简单易…...

golang实现极简todolist

ToDoList 最近跟着qimi老师做了一个ToDoList&#xff0c;我做的GitHub地址贴在这里&#xff0c;但由于前端出了点问题&#xff0c;所以都是用postman进行测试 原项目地址 部分功能展示 删除代办 查找代办 下面给出思路 思路 其实这是一个很简单的增删改查的实现&#xff…...

C# Onnx Dense Face 3D人脸重建,人脸Mesh

效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.Drawing; using System.Windows.Forms;namespace Onnx_Demo {public partial class frmMain : Form{public frmMain(){InitializeComponent();}string fileFilter "*.…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...