Day5:react函数组件与类组件

「目标」: 持续输出!每日分享关于web前端常见知识、面试题、性能优化、新技术等方面的内容。

「主要面向群体:」前端开发工程师(初、中、高级)、应届、转行、培训、自学等同学

Day4-今日话题

react「函数组件和类组件」的区别,将从以下七个角度介绍:

  1. 语法和定义
  2. 内部状态管理
  3. 生命周期
  4. 性能
  5. 可读性和维护性
  6. 上下文
  7. 集成状态管理库

1. 语法和定义:

「函数式组件」: 使用函数来定义,接收props作为参数,并返回一个React元素。

function FunctionalComponent(props{
  return <div>{props.message}</div>;
}

「类组件」: 使用类来定义,继承自React.Component,使用render 方法返回React元素。

class ClassComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

2. 内部状态管理:

「函数式组件」: 早期函数式组件无法自己管理状态。使用Hooks后,可以使用useState来在函数式组件内部管理状态。

「类组件」: 可以通过this.state来管理内部状态,可以在constructor中初始化状态,然后使用setState方法来更新状态。

3. 生命周期:

「函数式组件」: 早期函数式组件没有生命周期方法。使用Hooks后,可以使用useEffect来模拟生命周期行为,如componentDidMountcomponentDidUpdate等。

「类组件」: 拥有完整的生命周期方法,包括componentDidMountcomponentDidUpdatecomponentWillUnmount等。

4. 性能:

「函数式组件」:通常比类组件性能更好,因为函数组件不需要创建类的实例,从而减少了内存和性能开销。

「类组件」: 需要创建类的实例,可能会导致轻微的性能损失。

5. 可读性和维护性:

「函数式组件」: 通常更简洁,适合用于无状态、纯UI渲染的情况,代码更易于理解和维护。

「类组件」: 可能会显得冗长,因为需要定义类、构造函数和render方法,但在复杂的场景中提供了更多的结构。

6. 上下文(Context):

「函数式组件」: 可以通过useContext Hook来访问上下文。

「类组件」: 可以通过this.context来访问上下文。

7. 集成状态管理库:

「函数式组件」: 可以轻松地集成Redux或其他状态管理库,因为它们可以在任何地方使用Hooks

「类组件」: 也可以集成Redux等库,但可能需要使用高阶组件(HOC)或使用connect方法。


下一篇文章将分享「React相关的知识点」,欢迎点赞、关注、转发~ alt

本文由 mdnice 多平台发布

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

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

相关文章

MPI之数据打包和解包

MPI_Pack 和 MPI_Unpack 它们可以将源数据打包成二进制格式以便于传输&#xff0c;或者将二进制格式的数据解包成目标数据。这对函数通常用于在 MPI 应用程序中进行异构系统间的通信&#xff0c;即两个系统之间使用不同的二进制格式进行交互通信。 打包&#xff08;序列化&…

javaScipt

javaScipt 一、JavaScript简介二、javaScript基础1、输入输出语法2、变量3、常量4、数据类型4.1、数字型 number4.2、字符串类型 string4.3、布尔类型 boolean4.4、未定义类型 undefined4.5、null 空类型4.6、typeof 检测变量数据类型 5、数据类型转换5.1、隐式转换5.2、显示转…

容器技术Linux Namespaces和Cgroups

对操作系统了解多少&#xff0c;仅仅敲个命令吗 操作系统虚拟化&#xff08;容器技术&#xff09;的发展历程 1979 年&#xff0c;UNIX 的第 7 个版本引入了 Chroot 特性。Chroot 现在被认为是第一个操作系统虚拟化&#xff08;Operating system level virtualization&#x…

QT基础教程之七Qt消息机制和事件

QT基础教程之七Qt消息机制和事件 事件 事件&#xff08;event&#xff09;是由系统或者 Qt 本身在不同的时刻发出的。当用户按下鼠标、敲下键盘&#xff0c;或者是窗口需要重新绘制的时候&#xff0c;都会发出一个相应的事件。一些事件在对用户操作做出响应时发出&#xff0c…

【面经】字节测开实习岗面试题分享

1、自我介绍 2、为什么投了字节&#xff1f; 公司声誉&#xff1a;字节跳动是一家知名的科技公司&#xff0c;在互联网行业享有很高的声誉。 发展前景&#xff1a;字节跳动的业务涵盖了多个领域&#xff0c;包括短视频、资讯、教育等。这意味着您将有机会接触到不同的产品和…

C++通过JNI调用JAVA方法返回ArrayList对象

运行效果: JAVA实现: 获取系统已安装应用列表并返回List<String>对象 //使用系统API获取安装包列表public List<String> getAppList(MainActivity act) {List<String> packages = new ArrayList<String>();try {//取包信息列表List<PackageInf…

spring高级源码50讲-9-19(springAOP)

文章目录 AOP9) AOP 实现之 ajc 编译器收获&#x1f4a1; 10) AOP 实现之 agent 类加载收获&#x1f4a1; 11) AOP 实现之 proxy演示1 - jdk 动态代理收获&#x1f4a1;演示2 - cglib 代理收获&#x1f4a1; 12) jdk 动态代理进阶演示1 - 模拟 jdk 动态代理收获&#x1f4a1;演…

我的私人笔记(安装hive)

1.hive下载&#xff1a;Index of /dist/hive/hive-1.2.1 或者上传安装包至/opt/software&#xff1a;rz或winscp上传 2.解压 cd /opt/software tar -xzvf apache-hive-1.2.1-bin.tar.gz -C /opt/servers/ 3.重命名 mv apache-hive-1.2.1-bin hive 4.配置环境变量 vi /etc/…

计算机网络 概述部分

目录 计算机网络在信息时代的作用 计算机网络的重要特征 网络&#xff0c;internet,Internet的区别 局域网 广域网的区别 网络协议的分层 计算机网络在信息时代的作用 计算机网络的重要特征 连通性&#xff1a;彼此联通&#xff0c;交换信息 共享性&#xff1a;信息共享…

Java实现根据关键词搜索当当商品列表数据方法,当当API接口申请指南

要通过当当网的API获取商品列表数据&#xff0c;您可以使用当当开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过当当开放平台API获取商品列表&#xff1a; 首先&#xff0c;确保您已注册成为当当开放平台的开发者&#xff0c;并创建…

老程序员教你如何笑对问题,轻松培养逻辑思考和解决问题的能力

原文链接 ​​​​​​​老程序员教你如何笑对问题&#xff0c;轻松培养逻辑思考和解决问题的能力 故事发生在一个阳光明媚的午后&#xff0c;我们的主人公&#xff0c;老李&#xff0c;一位拥有十年工作经验的 Python 老程序员&#xff0c;正悠哉地在喝着咖啡。 这时&#x…

Android 12 源码分析 —— 应用层 三(SystemUIFactory及其Dependency解析)

Android 12 源码分析 —— 应用层 三&#xff08;SystemUIFactory及其Dependency解析&#xff09; 在上一篇文章中&#xff0c;介绍了SystemUI的启动流程&#xff0c;并且简单提及了Dagger2用来管理各个SystemUI中要用的依赖。而这部分代码就在&#xff1a;mContextAvailableC…

Java动态代理

所有interface类型的变量总是通过某个实例向上转型并赋值给接口类型变量的&#xff1a; CharSequence cs new StringBuilder(); //父类(CharSequence) 指向 子类&#xff08;StringBuilder&#xff09;&#xff0c;且没有强转符号 > 向上转型。 有没有可能不编写实现类…

扫盲:常用NoSQL数据库

前言 关系型数据库产品很多&#xff0c;如 MySQL、Oracle、Microsoft SQL Sever 等&#xff0c;但它们的基本模型都是关系型数据模型。 非关系型数据库又称为&#xff1a;NoSQL &#xff0c;没有统一的模型&#xff0c;而且是非关系型的。 常见的 NoSQL 数据库包括键值数据库、…

构建前端之光:JavaScript插件的研发艺术

前言 在前端开发的宇宙中&#xff0c;星星是网页&#xff0c;而照亮这个宇宙的&#xff0c;是我们前端开发者手中的JavaScript插件。插件就像乐高积木&#xff0c;可以将我们的代码块组装成复杂而精美的页面。本文将引导你走进JavaScript插件的世界&#xff0c;探讨如何开发、…

python unitest自动化框架

以下举一个最简单的unitest实例&#xff0c;包含备注&#xff0c;自己拉取代码运行一次就知道原理了 import unittest import osclass TestSample(unittest.TestCase):classmethoddef setUpClass(cls) -> None:print(整个测试类只执行一次)def setUp(self) -> None:prin…

const {}解构赋值

定义&#xff1a;ES6允许按照一定模式&#xff0c;从数组和对象中提取值&#xff0c;对变量进行赋值&#xff0c;这被称为解构&#xff08;Destructuring&#xff09;。 解构赋值的基本规则&#xff1a;只要等号右边不是对象或数组&#xff0c;就先将其转换为对象。由于undefi…

Prometheus+grafana安装配置

Prometheus安装配置 Prometheus下载地址 官方地址&#xff1a;Download | Prometheus 可根据系统版本下载想要的安装包&#xff0c;复制链接地址 wget https://github.com/prometheus/prometheus/releases/download/v2.33.3/prometheus-2.33.3.linux-amd64.tar.gzwg 解压pr…

系列五、Java操作RocketMQ简单消息之同步消息

一、概述 同步消息的特征是消息发出后会有一个返回值&#xff0c;即RocketMQ服务器收到消息后的一个确认&#xff0c;这种方式非常安全&#xff0c;但是性能上却没有那么高&#xff0c;而且在集群模式下&#xff0c;也是要等到所有的从机都复制了消息以后才会返回&#xff0c;适…

游戏服务器成DDoS最大攻击重灾区

游戏产业的迅猛发展也让游戏产业成为被黑客攻击的重灾区。什么原因让游戏行业成为DDoS的攻击重点。总结有如下原因和主要手段&#xff1a; 1.游戏行业的攻击成本较低&#xff0c;攻防成本1&#xff1a;N。随着DDoS攻击的打法越来越复杂&#xff0c;攻击点更是越来越多&#xff…