React 组件生命周期对比:Class vs. 函数式

在 React 中,Class 组件和函数式组件的生命周期存在一些差异。通过对 React 中 Class 组件和函数式组件的生命周期进行对比,详细探讨了它们在设计哲学、生命周期管理和开发技巧上的异同。全面了解 React 中两种组件类型的生命周期特点,以及如何灵活运用它们来构建现代化的 React 应用。
在这里插入图片描述

React Class 组件生命周期:

  1. constructor: 组件实例化时调用,用于初始化状态和绑定方法。

  2. componentDidMount: 组件挂载后调用,可以进行 DOM 操作或发起数据请求。

  3. componentDidUpdate: 组件更新后调用,用于处理更新前后的状态差异。

  4. componentWillUnmount: 组件即将被卸载时调用,用于清理定时器或取消订阅等操作。

React 函数式组件生命周期:

  1. useState 和 useEffect: 使用 useState 定义状态,使用 useEffect 进行副作用操作,相当于 Class 组件的 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

下面是一个简单的示例,演示了 Class 组件和函数式组件中生命周期的关系和区别:

// Class 组件
class ClassComponent extends React.Component {constructor(props) {super(props);this.state = {count: 0};}componentDidMount() {console.log("Component mounted");}componentDidUpdate(prevProps, prevState) {console.log("Component updated");}componentWillUnmount() {console.log("Component will unmount");}render() {return (<div><h2>Class Component</h2><p>Count: {this.state.count}</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button></div>);}
}// 函数式组件
import React, { useState, useEffect } from "react";function FunctionalComponent() {const [count, setCount] = useState(0);// 模拟 componentDidMountuseEffect(() => {console.log("Component mounted");// 清理函数,模拟 componentWillUnmountreturn () => {console.log("Component will unmount");};}, []);// 模拟 componentDidUpdateuseEffect(() => {console.log("Component updated");}, [count]); // 仅在 count 发生变化时执行return (<div><h2>Functional Component</h2><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}export default FunctionalComponent;// 父组件
function App() {const [showClassComponent, setShowClassComponent] = React.useState(true);return (<div>{showClassComponent ? <ClassComponent /> : <FunctionalComponent />}<button onClick={() => setShowClassComponent(!showClassComponent)}>Toggle Component</button></div>);
}ReactDOM.render(<App />, document.getElementById("root"));

在上面的示例中,Class 组件和函数式组件都实现了一个计数器,当点击按钮时,计数器会递增。在浏览器控制台中可以看到不同生命周期函数的输出。

总结一下:

  • Class 组件中的生命周期函数需要手动实现,而函数式组件使用 useEffect 来模拟生命周期行为。
  • 函数式组件中的 useEffect 可以模拟 componentDidMount、componentDidUpdate 和 componentWillUnmount,具体行为通过参数控制。

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

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

相关文章

MySQL-触发器:触发器概述、触发器的创建、查看删除触发器、 触发器的优缺点

触发器 触发器1. 触发器概述2. 触发器的创建2.1 创建触发器语法2.2 代码举例 3. 查看、删除触发器3.1 查看触发器3.2 删除触发器 4. 触发器的优缺点4.1 优点4.2 缺点4.3 注意点 注&#xff1a;此为笔者学习尚硅谷-宋红康MySQL的笔记&#xff0c;其中包含个人的笔记和理解&#…

Android 音视频开发 - VideoView

Android 音视频开发 - VideoView 本篇文章主要介绍下Android 中的VideoView. 1: VideoView简介 VideoView是一个用于播放视频的视图组件&#xff0c;可以方便地在应用程序中播放本地或网络上的视频文件。 VideoView可以直接在布局文件中使用&#xff0c;也可以在代码中动态…

Matlab与ROS(1/2)---Simulink(二)

0. 简介 在上一章中我们详细介绍了ROS与Matlab链接的基础用法。这一章我们将来学习如何使用Matlab当中的Simulink来完成。Simulink对机器人操作系统(ROS)的支持使我们能够创建与ROS网络一起工作的Simulink模型。ROS是一个通信层&#xff0c;允许机器人系统的不同组件以消息的形…

前端HTML入门基础5(表单)

前端HTML入门基础5&#xff08;表单&#xff09; 表单-基本结构文本框和密码框单选框和复选框隐藏域确认按钮重置按钮普通按钮文本域下拉框禁用表单控件label标签fieldset与legend的使用 表单-基本结构 在HTML中&#xff0c;表单&#xff08;Forms&#xff09;是一种允许用户与…

嵌入式实时操作系统的调度机制与优化

大家好&#xff0c;今天给大家介绍嵌入式实时操作系统的调度机制与优化&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 嵌入式实时操作系统的调度机制与优化 一、引言 嵌入式实…

Esilnt使用记录

已有vue2项目添加eslint自动格式化 参考文章

最前沿・量子退火建模方法(1) : subQUBO讲解和python实现

前言 量子退火机在小规模问题上的效果得到了有效验证&#xff0c;但是由于物理量子比特的大规模制备以及噪声的影响&#xff0c;还没有办法再大规模的场景下应用。 这时候就需要我们思考&#xff0c;如何通过软件的方法怎么样把大的问题分解成小的问题&#xff0c;以便通过现在…

远程桌面防火墙是什么?

远程桌面防火墙&#xff0c;是一种针对远程桌面应用的安全防护工具。它可以在保证远程桌面连接的便利性和高效性的对网络连接进行安全性的保护&#xff0c;防止未经授权的访问和潜在的安全风险。 远程桌面防火墙的主要功能是对远程桌面连接进行监控和管理。它通过识别和验证连接…

python内置函数exec()、filter()详解

Python 中的 exec() 函数 exec() 是 Python 中的一个强大的内置函数&#xff0c;它允许你执行任意 Python 代码&#xff0c;不论其大小。这个函数帮助我们执行动态生成的代码。想象一下 Python 解释器接收一段代码&#xff0c;内部处理并执行它&#xff0c;exec() 函数也是这样…

vue3+vant自动导入+pina+vite+js+pnpm搭建项目框架

vue3vant自动导入pinavitejspnpm搭建项目框架 文章目录 vue3vant自动导入pinavitejspnpm搭建项目框架1. 安装pnpm&#xff08;如果还没有安装&#xff09;&#xff1a;2. 创建项目目录并进入该目录&#xff1a;3. 初始化项目&#xff1a;4. 安装Vite作为构建工具&#xff1a;5.…

双向链表C语言实现

List.h文件 #pragma once #include<stdio.h> #include<stdlib.h> #include<assert.h> //结构 typedef int LTDatatype; typedef struct ListNode {LTDatatype data;struct ListNode* next;struct ListNode* prev; }LTNode; //声明接口和方法 void LTInit(LT…

cron表达式使用手册

cron表达式 我们在使用定时调度任务的时候&#xff0c;最常用的就是cron表达式。通过cron表达式来指定任务在某个时间点或者周期性执行。 范围&#xff1a; 秒&#xff08;0-59&#xff09;&#xff08;可选&#xff09; 分&#xff08;0-59&#xff09; 时&#xff08;0-…

ansible的常见用法

目录 ##编辑hosts文件 ##copy模块##复制过去 ##fetch模块##拉取 ##shell模块 ##好用 ##command模块## ##file模块### ##cron模块### ##crontab 计划任务 ##下载好时间插件 ##script模块 ##yum模块## ##yum下载源配置文件 /etc/yum.repos.d/CentOS-Base.repo ##ser…

Linux 使用 ifconfig 报错:Failed to start LSB: Bring up/down networking

一、报错信息 在运行项目时报错数据库连接失败&#xff0c;我就想着检查一下虚拟机是不是 Mysql 服务忘了开&#xff0c;结果远程连接都连接不上虚拟机上的 Linux 了&#xff0c;想着查一下 IP 地址看看&#xff0c;一查就报错了&#xff0c;报错信息&#xff1a; Restarting…

LeetCode34:在排序数组中查找元素的第一个和最后一个位置(Java)

目录 题目&#xff1a; 题解&#xff1a; 方法一&#xff1a; 方法二&#xff1a; 题目&#xff1a; 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&…

QCustomPlot移植android后实现曲线放大缩小

一.问题 1.QCustomPlot在windows系统上可以支持鼠标左键按下平移拖动,滚轮放大缩小,矩形放大功能; 但是到了android触摸屏上无法识别鼠标滚轮事件,同时控件也不识别多点触控的放大缩小,这就导致想要实现放大缩小比较困难。 本文会给出两种解决方法。 二.QCustomPlot介绍…

Netty学习——高级篇2 Netty解码技术

接上篇&#xff1a;Netty学习——高级篇1 拆包 、粘包与编解码技术&#xff0c;本章继续介绍Netty的其他解码器 1 DelimiterBasedFrameDecoder分隔符解码器 DelimiterBasedFrameDecoder 分隔符解码器是按照指定分隔符进行解码的解码器&#xff0c;通过分隔符可以将二进制流拆分…

粘性定位应用

现象&#xff1a;当页面滑动到某个位置时&#xff0c;图片吸顶。 思路&#xff1a;创建一个father背景。包含内容和需要吸顶的背景图 当滚轮运动距离大于800px时&#xff0c;将吸顶图的position设置为sticky&#xff0c;距离顶部改为0px。 html代码&#xff1a; <!DOCTYPE …

基于PyTorch神经网络进行温度预测——基于jupyter实现

导入环境 import numpy as np import pandas as pd import matplotlib.pyplot as plt import torch import torch.optim as optim import warnings warnings.filterwarnings("ignore") %matplotlib inline读取文件 ### 读取数据文件 features pd.read_csv(temps.…

Linux第90步_异步通知实验

“异步通知”的核心就是信号&#xff0c;由“驱动设备”主动报告给“应用程序”的。 1、添加“EXTI3.c” #include "EXTI3.h" #include <linux/gpio.h> //使能gpio_request(),gpio_free(),gpio_direction_input(), //使能gpio_direction_output(),gpio_get_v…