react新旧生命周期钩子

以下的内容根据尚硅谷整理。

旧生命钩子

在这里插入图片描述
辅助理解:

  • 红色框:挂载时生命钩子
  • 蓝色框:更新时生命钩子
  • 绿色框:卸载时生命钩子

挂载时

如图所示,我们可以看到,在组件第一次挂载时会经历:
构造器(constructor)=》组件将要挂载(componentWillMount)=》组件挂载渲染(render)=》组件挂载完成(componentDidMount)。

更新时

有三条路径可以被触发,分别是红色、橙色和粉色。
在这里插入图片描述
组件内部状态更新:
路径2:组件是否应该更新(shouldComponentUpdate)=》组件将要更新(componentWillUpdate)=》组件更新渲染(render)=》组件更新完成(componentDidUpdate)。

  • shouldComponentUpdate,未显性声明时默认返回ture,返回false时组件无法进行更新操作。也就无法执行××××××××》组件将要更新(componentWillUpdate)=》组件更新渲染(render)=》组件更新完成。
shouldComponentUpdate(){return false;
}

强制更新:
路径3:我们可以调用this.forceUpdate()实现强制更新,这个api和setState一样都是React自带的,一般这个强制更新很少用。
组件将要更新(componentWillUpdate)=》组件更新渲染(render)=》组件更新完成(componentDidUpdate)。

父组件重新render:
路径1:在父组件执行完render()之后会被触发。还记得吗?我们蓝色的区域是更新的生命钩子,也就是说第一次render()的时候不算,第二次及之后才会被触发。(componentWillReceiveProps)

import React, { Component } from 'react'export default class A extends Component {state={car:'奥迪'}changeCar= () => {this.setState({car:'奔驰'})}render() {return (<div><div>我是组件A</div><button onClick={this.changeCar}>换车</button><B car={this.state.car}/></div>)}
}class B extends Component {//首次渲染不会被触发componentWillReceiveProps(){console.log('componentWillReceiveProps')}render() {return (<div>我是组件B,我接收到的车是:{this.props.car}</div>)}
}

旧生命钩子的总结

在这里插入图片描述

新生命钩子

当你充分理解旧的生命钩子之后,看下面这张图对你来说应该易如反掌。大体来说用来划分的区块方式一致,即:创建时、更新时【三条路径】、卸载时。
在这里插入图片描述

getDerivedSateFromProps

直译:从props哪里获得的派生的State

1.
state ={name:'佛系努力中……'}
//注意点1:需声明为类的静态方法《static》
static getDerivedStateFormProps(props,state){//可以读取到props,state//注意点2:必须return一个state对象或者nullreturn {name:'哈哈哈'} //或者null
}
最后,this.state.name将会被渲染成‘哈哈哈’,直接更改了state的值,且任何操作不会改变该值。
2.
state ={name:'佛系努力中……'}
static getDerivedStateFormProps(props,state){return null
}
如果return null 功能将不会受到影响
3.此方法使用于state的值在任何时候取决于porps
state ={name:'佛系努力中……'}
static getDerivedStateFormProps((props,state){return props
}

总结:这个生命周期钩子会被用到情况很少,并且建议尽量避免使用,防止导致代码冗余,并使组件难以维护。

getSnapshotBeforeUpdate

//在更新之前获得一个快照
getSnapshotBeforeUpdate(prevProps,prevState){console.log("getSnapshotBeforeUpdate--",prevProps,prevState)return '一只小猫'
}

componentDidUpdate

//组件以及更新完毕,接收三个值,最后一个snapShot,即为getSnapshotBeforeUpdate返回值
componentDidUpdate(prevProps,prevState,snapShot){console.log("componentDidUpdate--",prevProps,prevState,snapShot)}

一个应用场景
总结:这个东西实际应用场景也很少,嘿嘿!
在这里插入图片描述

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

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

相关文章

stateflow——如何查看状态机中参数变化及状态机断点调试

法一&#xff1a;使用Data Inspector 点击“符号图窗”和“属性”&#xff0c;如图&#xff1b;在选择变量n并右键点击inspector&#xff0c;最后在logging&#xff0c;如图 法二&#xff1a;log active state 和法一类似使用data inspector查看&#xff0c;类似的查看方法和…

【每周一测】Java阶段四第三周学习

目录 1、关于分布式锁的说法&#xff0c;错误的是&#xff08; &#xff09; 2、JDK动态代理产生的代理类和委托类的关系是 3、下列关于ElasticSearch中基本概念描述错误的是 4、Spring Cloud 中&#xff0c;Feign 是什么&#xff1f; 5、在JavaScript中&#xff0c;可以使…

玩转大数据13: 数据伦理与合规性探讨

1. 引言 随着科技的飞速发展&#xff0c;数据已经成为了现代社会的宝贵资产。然而&#xff0c;数据的收集、处理和利用也带来了一系列的伦理和合规性问题。数据伦理和合规性不仅关乎个人隐私和权益的保护&#xff0c;还涉及到企业的商业利益和社会责任。因此&#xff0c;数据…

韵达快递单号查询,以表格的形式导出单号的每一条物流信息

批量查询韵达快递单号的物流信息&#xff0c;并以表格的形式导出单号的每一条物流信息。 所需工具&#xff1a; 一个【快递批量查询高手】软件 韵达快递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的伙伴记得先注册…

SOP(标准作业程序)和WI(操作指导书)的联系和区别

目录 1.SOP&#xff08;标准作业程序&#xff09;&#xff1a;2.WI&#xff08;操作指导书&#xff09;&#xff1a;3.SOP和WI的区别&#xff1a; 1.SOP&#xff08;标准作业程序&#xff09;&#xff1a; SOP: 所谓SOP&#xff0c;是 Standard Operation Procedure三个单词中…

【计算机网络实验】实验三 IP网络规划与路由设计(头歌)

目录 一、知识点 二、实验任务 三、头歌测试 一、知识点 IP子网掩码的两种表示方法 32位IP子网掩码&#xff0c;特点是从高位开始连续都是1&#xff0c;后面是连续的0&#xff0c;它有以下两种表示方法&#xff1a; 传统表示法&#xff0c;如&#xff1a;255.255.255.0IP前…

【WebSocket】使用ws搭建一个简单的在线聊天室

前言 什么是WebSockets&#xff1f; WebSockets 是一种先进的技术。它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API&#xff0c;你可以向服务器发送消息并接收事件驱动的响应&#xff0c;而无需通过轮询服务器的方式以获得响应。 webscokets 包括webscoket…

中科院分区和JCR分区有什么区别

文章目录 名词解释学科划分不同参考的影响因子不同期刊分区不同期刊分区阈值不同 名词解释 中科院分区&#xff1a;又称“中科院JCR分区”&#xff0c;是中国科学院文献情报中心世界科学前沿分析中心的科学研究成果&#xff0c;期刊分区表数据每年底&#xff08;每年12月中下旬…

汽车继电器

汽车继电器 电子元器件百科 文章目录 汽车继电器前言一、汽车继电器是什么二、汽车继电器的类别三、汽车继电器的应用实例四、汽车继电器的作用原理总结前言 汽车继电器作为一种电子设备,广泛应用于汽车电路中的各种控制和保护任务,能够可靠地控制和传送电能,确保汽车系统的…

Python爬虫-实现批量抓取王者荣耀皮肤图片并保存到本地

前言 本文是该专栏的第12篇,后面会持续分享python爬虫案例干货,记得关注。 本文以王者荣耀的英雄皮肤为例,用python实现批量抓取“全部英雄”的皮肤图片,并将图片“批量保存”到本地。具体实现思路和详细逻辑,笔者将在正文结合完整代码进行详细介绍。注意,这里抓取的图片…

低代码:美味膳食或垃圾食品

低代码开发是近年来迅速崛起的软件开发方法&#xff0c;让编写应用程序变得更快、更简单。有人说它是美味的膳食&#xff0c;让开发过程高效而满足&#xff0c;但也有人质疑它是垃圾食品&#xff0c;缺乏定制性与深度。你认为低代码到底是美味的膳食还是垃圾食品呢&#xff0c;…

ubuntu串口永久权限

ubuntu串口永久权限 临时打开串口权限 sudo chmod 666 /dev/ttyUSB0该方法只能临时添加访问权限&#xff0c;一次性的&#xff0c;下次拔插串口线或者开关机还需要再次赋予串口权限。 永久打开串口权限 首先查看用户组 ls -l /dev/ttyUSB0终端输出&#xff1a; crw-rw-rw…

从零开始搭建链上dex自动化价差套利程序(11)

风险控制 需要将仓位杠杆控制到3倍以内&#xff0c;由于dydx与apex没有获取仓位杠杆的接口&#xff0c;但是每次发送交易的数额可以决定&#xff0c;故而可以设置每次发送总仓位1.5倍杠杆的数额&#xff0c;然后设置一个变量保证每个方向上的交易不超过2次&#xff0c;即可保证…

数据结构和算法-单链表

数据结构和算法-单链表 1. 链表介绍 链表是有序的列表&#xff0c;但是它在内存中是存储如下 图1 单链表示意图 小结: 链表是以节点的方式存储每个节点包含data域&#xff0c;next域&#xff0c;指向下一个节点。如图&#xff1a;发现链表的各个节点不一定是连续存储。比如地…

滑动窗口练习(三)— 加油站问题

题目 测试链接 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数数组…

如何教会小白使用淘宝API接口获取商品数据

随着互联网的普及&#xff0c;越来越多的人开始接触网络购物&#xff0c;而淘宝作为中国最大的电商平台之一&#xff0c;成为了众多消费者首选的购物平台。然而&#xff0c;对于一些小白用户来说&#xff0c;如何通过淘宝API接口获取商品数据可能是一个难题。本文将详细介绍如何…

Python学习之——时间和日期

Python学习之——时间模块 参考time 模块常见接口 datetime 模块常见接口 calendar 模块常见接口 示例 参考 Python datetime模块详解、示例 搞定Python时区的N种姿势 calendar – 日历相关 time 模块 在Python中&#xff0c;通常有这几种方式来表示时间&#xff1a; 1&…

浮点数在计算机中如何存储

举例&#xff1a; 结果&#xff1a; 文字描述&#xff1a; 先将浮点数转化为二进制的表示形式&#xff0c; 接着将其二进制的形式按照科学计数法来表示&#xff0c; 符号位的确定&#xff1a;正数0&#xff0c; 负数1 指数的确定&#xff1a;将其二进制表示成为科学计数法…

Fall in love with English

Fall in love with English 爱上英语 Hiding behind the loose dusty curtain, a teenager packed up his overcoat into the suitcase. 躲藏在布满尘土的松软的窗帘后边&#xff0c;一个年轻人打包他的外套到行李箱中。 He planned to leave home at dusk though there was th…

超完整的mysql安装配置方法(包含idea和navicat连接mysql,并实现建表)

mysql安装配置方法 1、下载mysql2、解压到指定的安装目录3、配置初始化文件my.ini4、配置用户变量和系统变量5、初始化mysql6、安装mysql服务并启动修改密码7、使用idea连接mysql8、使用Navicat可视化工具连接mysql&#xff0c;并实现新建数据库&#xff0c;新建表 1、下载mysq…