【React】class组件生命周期函数的梳理和总结(第一篇)

1. 前言

        本篇梳理和总结一下React的生命周期函数,方便使用class组件的同学查阅,先上生命周期图谱。

2. 生命周期函数
生命周期函数说明
constructor(props)

功能:如果不需要初始化state或不进行方法绑定,class组件可以不用实现构造函数constructor。

输入:props - 设置组件当前状态props

static getDerivedStateFromProps(

    nextProps,

    state

)

功能:静态方法,在调用render方法之前调用,挂载或更新时都会调用,返回一个新对象来更新state。

注:即用新props来更新state

输入

nextProps - 还未更新的接下来props

state - 组件当前状态

输出:state -组件新的状态

shouldComponentUpdate(

    nextProps,

    nextState

)

功能:根据该函数返回时,判断React组件输出是否受当前state或props更改的影响,默认行为是state每次发生变化组件都会重新渲染

注:首次渲染或forceUpdate时不用调用该方法

输入

nextProps - 还未更新的接下来props

nextState - 还未更新的接下来state

输出:boolean(返回false,则跳过更新)

render()

功能:检查this.props和this.state变化,是纯函数。

注:shouldComponentUpdate返回false,则不调用render

输入:无

输出:ReactElement | 数组或Fragments | Portals | string | number | boolean | null | undefined

getSnapshotBeforeUpdate(

    prevProps,

    prevState

)

功能:最近一次渲染输出(提交到DOM节点)之前调用,返回值传递给componentDidUpdate第3个参数,此处适合的操作:

1. 在发生更改前从DOM中捕获一些信息(滚动位置)

输入

prevProps - 在更新之前的props

prevState - 在更新之前的state

输出:snapShot

componentDidUpdate(

    prevProps,

    prevState,

    snapShot

)

功能:组件更新后立即调用,首次渲染不执行,适合在此处的操作:

1. 比较前后props发起网络请求

2. DOM操作

注:可以在此处调用setState,但需要包裹在条件语句中,防止死循环

输入

prevProps - 在更新之前的props

prevState - 在更新之前的state

snapShot -getSnapshotBeforeUpdate返回的快照

componentDidMount()

功能:组件挂载(插入DOM树)后立即调用,适合在此处的操作:

1. 设置定时器timer

2. 发起网络请求

3. 添加订阅

4. DOM操作

注:可以在此处调用setState,但会导致性能问题

输入:无

componentWillUnmount()

功能:class组件卸载及销毁之前直接调用,执行必要清理工作:

1. 清除tImer

2. 取消网络请求

3. 清除订阅

注:不能在此处调用setState

输入:无

异常出错时的生命周期函数
static getDerivedStateFromError(error)

功能:当后代组件抛出错误后被调用

注:该函数在渲染阶段调用,不允许出现副作用。

输入:error - 抛出的错误

输出:state -组件新的状态

componentDidCatch(error, info)

功能:当后代组件抛出错误后被调用

注:该函数在提交阶段调用,允许执行副作用。开发模式错误会冒泡到window,生产模式不会冒泡。

输入

error - 抛出的错误

info - 带有componentStack key的对象,包含组件引发错误的栈信息

2.1 挂载

        当组件实例被创建并插件DOM时,其生命周期函数调用顺序如下:

  • constructor(props)
  • static getDerivedStateFromProps()
  • render()
  • componentDidMount()
2.2 更新

        当组件更新时,其生命周期函数调用顺序如下:

  • new props、setState和forceUpdate触发更新
  • static getDerivedStateFromProps()
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate()
  • componentDidUpate()
2.3 卸载
  • componentWillUnmount()
3. 总结

        学习或复习时,注意各生命周期方法的参数,部分带参数的方法,props在前,state在后,render之前的是nextProps nextState(渲染阶段),render之后的是prevProps, prevState(提交阶段)。

        React新的官方文档已再不提生命周期函数,将PureComponent和Component标记为过时的API,笔者猜想React后续不再推荐使用class组件,而是转入函数组件FC,欢迎大家进入Hook的世界。

下一篇:【React】常用Hook函数的梳理和总结(第二篇)-CSDN博客

注:以上,如有不合理之处,还请帮忙指出,大家一起交流学习~  

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

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

相关文章

阿里云性能测评ESSD Entry云盘、SSD云盘、ESSD和高效云盘

阿里云服务器系统盘或数据盘支持多种云盘类型,如高效云盘、ESSD Entry云盘、SSD云盘、ESSD云盘、ESSD PL-X云盘及ESSD AutoPL云盘等,阿里云百科aliyunbaike.com详细介绍不同云盘说明及单盘容量、最大/最小IOPS、最大/最小吞吐量、单路随机写平均时延等性…

Windows下linux 子系统 WSL2怎样使用usb串口(USBIPD-win4.0.0)

Windows下linux 子系统 WSL2怎样使用usb串口(USBIPD-win4.0.0) 一、widows安装二、ubuntu安装三、widows配置四、wsl配置 一、widows安装 https://github.com/dorssel/usbipd-win 直接下载最新版本的msi文件安装 二、ubuntu安装 sudo apt install lin…

工作中redis相关知识总结

这里写目录标题 一、Redis数据持久化概念二、redis数据类型三、redis缓存的应用流程四、什么样的数据适合存放到redis中?1、什么情况下,redis中会没有数据?2、redis缓存项目在测试中的注意事项a、更新缓存b、淘汰缓存 五、什么是缓存击穿1、缓…

前端八股文(CSS篇)一

目录 1.px和em的区别 2.介绍下BFC及其应用 3.介绍下粘性布局(sticky) 4.清除浮动的方法 5.如何用css或js实现多行文本溢出省略效果,考虑兼容 6.如何触发重排和重绘? 7.重绘与重排的区别? 8.说说两种盒模型以及区…

矩阵运营怎么弄那么多账号?矩阵账号搭建方案分享

在当今数字营销的浪潮中,“矩阵运营”成为了一个热门话题。许多企业和个人面临着如何高效管理大量社交媒体账号的挑战。本文将详细介绍“矩阵账号搭建方案”,并探索如何利用“万媒易发”这一工具,来提升矩阵运营的效率。 一、矩阵运营的核心要…

【MySQL】数据库之主从复制和读写分离

目录 一、什么是读写分离? 二、为甚要读写分离? 三、什么时候需要读写分离? 四、主从复制与读写分离 五、MySQL支持的二进制日志格式 六、主从复制的工作原理 七、MySQL读写分离的原理 八、MySQL读写分离的方式有哪些 九、实验一&am…

Vue中信息订阅与发布和配置代理服务器的使用和原理

信息订阅与发布 全局事件总线和信息订阅与发布一样都是实现任意组件的通信。常用的是全局事件总线 信息订阅与发布借用第三方库pubsub实现任意组件的通信 安装pubsub npm i pubsub-js 下列代码为MyHeader组件订阅了一份信息,MyFooter负责传递信息给MyHeader <template&…

基于Java课堂签到系统

基于Java课堂签到系统 功能需求 1、用户登录&#xff1a;学生需要使用学号或手机号等唯一标识登录系统。 2、签到功能&#xff1a;在课堂开始时&#xff0c;学生可以通过系统进行签到&#xff0c;以证明出席。 3、签出功能&#xff1a;在课堂结束时&#xff0c;学生可以通过…

vite + javascript 创建纯 javascript项目

1、环境搭建&#xff1a;需要安装 node 管理器命令&#xff1a;安装了node的后&#xff0c;可以使用 npm &#xff0c;也可以安装使用 cnpm / pnpm 下载 cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 下载 pnpm npm i -g pnpm pnpm config set r…

条款16:成对使用 new 和 delete 时要采用相同形式

下面程序的行为是未定义的。至少&#xff0c;stringArray指向的100个string对象中有99个不太可能被正确地析构。 被delete的指针指向单个对象还是一个对象数组&#xff1f;内存数组通常包括数组的大小&#xff0c;delete可以知道需要调用多少个析构函数。 使用delete时使用了方…

Crow:run的流程4 准备接收http请求

完成tcp的accept后,下一步需要接收tcp的数据,同时完成http的分析 class Connection { public:void start(){adaptor_.start([this](const asio::error_code& ec) {if (!ec){start_deadline();parser_.clear();do_read();}else{CROW_LOG_ERROR << "Could not …

Java后端开发——Spring实验

文章目录 Java后端开发——Spring实验一、Spring入门1.创建项目&#xff0c;Spring依赖包。2.创建JavaBean&#xff1a;HelloSpring3.编写applicationContext.xml配置文件4.测试&#xff1a;启动Spring&#xff0c;获取Hello示例。 二、Spring基于XML装配实验1.创建JavaBean类&…

CSS 顶部位置翻转动画

<template><div class"container" mouseenter"startAnimation" mouseleave"stopAnimation"><!-- 旋方块 --><div class"box" :class"{ rotate-hor-top: isAnimating }"><!-- 元素内容 --><…

【快速全面掌握 WAMPServer】12.WAMPServer 故障排除经验大总结

网管小贾 / sysadm.cc 众所周知&#xff0c;搞开发需要先搭建相应的编程和调试环境。 对于 PHPer 来说&#xff0c;很多像我一样的新手小白们入门的时候&#xff0c;通常会选择一些集成开发环境包&#xff0c;其中就有 WampServer 。 集成环境包被许多人所诟病&#xff0c;说…

C++ 代码中如何使用互斥锁std::mutex和独占锁std::unique_lock

创建一个C线程需要传入几个参数&#xff1f; 如何理解和使用C线程循环 C 类 函数 变量 进程 线程 C关于锁和互斥量你真的理解了吗&#xff1f; 在这个例子中&#xff0c;我们将创建一个简单的类&#xff0c;该类包含一个共享数据成员和两个方法&#xff0c;这两个方法将通过互…

Node.js本地搭建简单页面小游戏

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

后台管理项目的多数据源方案

引言 在互联网开发公司中&#xff0c;往往伴随着业务的快速迭代&#xff0c;程序员可能没有过多的时间去思考技术扩展的相关问题&#xff0c;长久下来导致技术过于单一。为此最近在学习互联网思维&#xff0c;从相对简单的功能开始做总结&#xff0c;比如非常常见的基础数据的…

第二百四十三回 再分享一个Json工具

文章目录 1. 概念介绍2. 分析与比较2.1 分析问题2.2 比较差异 3. 使用方法4. 内容总结 我们在上一章回中介绍了"分享三个使用TextField的细节"相关的内容&#xff0c;本章回中将再 分享一个Json插件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…

案例087:基于微信小程序的社区养老服务平台设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

python | PYTHON正则表达式

操作符说明实例.表示任何单个字符[]字符集&#xff0c;对单个字符给出取值范围[abc]表示a、b、c&#xff0c;[a-z]表示a到z单个字符[^ ]非字符集&#xff0c;对单个字符给出排除范围[^abc]表示非a或b或c的单个字符*前一个字符0次或无限次扩充abc* 表示ab&#xff0c;abc&#x…