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

React中类组件和函数组件的理解和区别

react代码模块分为类组件和函数组件。

语法和定义内部状态管理生命周期性能可读性和维护性上下文集成状态管理库等角度对比React中类组件和函数组件。

1、语法和定义

类组件:

使用 ES6 的类(class)语法定义的 React 组件。它们具有更复杂的功能,特别是在 React 16.8 之前,它们是唯一能够使用状态(state)和生命周期方法的组件。

特点:

  • 使用 class 关键字定义,并继承自 React.Component
  • 能够使用 state 来管理组件的内部状态。
  • 可以使用生命周期方法,如 componentDidMountcomponentDidUpdate componentWillUnmount 等。
  • 通过 this.props 来访问传递给组件的属性(props)。
import React, { Component } from 'react';class HelloComponent extends Component {constructor(props) {super(props);this.state = {count: 0};}increment = () => {this.setState({ count: this.state.count + 1 });}render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.increment}>Increment</button></div>);}
}export default HelloComponent;

函数组件(Function Component):

函数组件是使用 JavaScript 函数定义的 React 组件。自 React 16.8 以来,函数组件通过引入 Hooks 可以实现状态管理和副作用处理,功能上已经与类组件基本等价。 

特点:

  • 使用 JavaScript 函数定义,通常是更简单和推荐的方式。
  • 在函数组件中,无法直接使用 this,而是通过 Hooks(如> useState useEffect)来管理状态和副作用。
  • 更加简洁,通常用于无状态组件,但在有状态需求时也可以使用 Hooks
import React, { useState } from 'react';function HelloComponent() {const [count, setCount] = useState(0);const increment = () => {setCount(count + 1);};return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button></div>);
}export default HelloComponent;

 

2、内部状态管理

类组件:

使用类组件时,可以通过组件的内部状态(state)来管理组件的数据。

import React from 'react';class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}render() {return (<div><p>Count: {this.state.count}</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>Increase</button></div>);}
}export default Counter;

函数组件(Function Component):

函数组件可以使用hooks(React 16.8+)来管理内部状态。

useState钩子:

import React, { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increase</button></div>);
}export default Counter;

useReducer钩子(适用于复杂的状态逻辑):

import React, { useReducer } from 'react';function Counter() {const [count, dispatch] = useReducer((state, action) => {switch (action.type) {case 'increment':return state + 1;case 'decrement':return state - 1;default:throw new Error();}}, 0);return (<div><p>Count: {count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increase</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrease</button></div>);
}export default Counter;

3、生命周期

类组件:

类组件生命周期(三个阶段:挂载阶段,更新阶段,卸载阶段)

挂载阶段执行顺序 :constructor->componentWillMount->render->componentDidMount

更新阶段执行顺序: shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate

销毁阶段: componentWillUnmount

import React  from "react";
import {Link} from 'react-router-dom'
class Demo extends React.Component{constructor(props){super(props)console.log("constructor")}state = {num:1}UNSAFE_componentWillMount(){console.log("componentWillMount")}componentDidMount(){console.log("componentDidMount")}shouldComponentUpdate(){console.log('shouldComponentUpdate')return true}UNSAFE_omponentWillUpdate(){console.log("componentWillUpdate")}componentDidUpdate(){console.log("componentDidUpdate")}componentWillUnmount(){console.log("componentWillUnmount")}Submit = () =>  {this.setState({num:this.state.num+=1})}render(){console.log('render')return(<><Link to='/app1'>App1</Link>//这里替换成自己的即可<h3>{this.state.num}</h3><button onClick={this.Submit}>改变</button></>)}
}
export default Demo

函数组件(Function Component):

函数组件本质没有生命周期,但是我们通过Hooks来模仿类组件当中的生命周期(也是三个阶段)

import { useState ,useEffect} from "react"
function App1 (){const [username ,setUsername] = useState('')const setChange = event => {setUsername(event.target.value);};// useEffect  =  vue mounted 区别是只要视图更新就变化 感觉类似watch 但是他又是初始化的 时候第一个//  useEffect(()=>{},[])useEffect(()=>{console.log('模拟componentDidMount第一次渲染', username)return () =>{console.log('模拟componentWillUnmount执行销毁后')}},[username])return(<><input value={username} onChange={setChange}></input></>)
}
export default  App1

4、性能

React类组件和函数组件之间的性能对比主要关注以下几个方面:

角度类组件函数组件
渲染性能在渲染时会进行shouldComponentUpdate生命周期检查需要使用React.memo或自定义比较逻辑来避免不必要的重渲染
状态更新可以在shouldComponentUpdate中实现更细粒度的更新检查需要使用React.memo或自定义比较逻辑来避免不必要的重渲染
组件的状态和生命周期复杂性可能会引入更多的对象和函数,这可能会影响GC(垃圾回收)-
内存占用因为其实例和可能的引用,可能会占用更多内存-

5、可读性和维护性

可读性和维护性是评估代码质量的重要指标。

  • 类组件的可读性和维护性可能不如函数组件。类组件中的this指向以及生命周期方法(如componentDidMount)可能会增加理解和维护的难度。

  • 函数组件的可读性和维护性较好,因为它们就像纯函数,更接近于数学函数的定义,更容易理解和维护。

  • 对于简单的组件,使用函数组件是首选,因为它们更简单且易于理解。

  • 对于需要管理状态或生命周期事件的组件,类组件是必须的。

  • 可以使用hooks(React 16.8+)来编写函数组件,它们可以让你在不编写类的情况下使用state和其他React特性。

如:类组件

class MyComponent extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}render() {return (<div><p>You clicked {this.state.count} times</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>Click me</button></div>);}
}

函数组件(Function Component):

function MyComponent() {const [count, setCount] = React.useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

在这个例子中,函数组件MyComponent通过React.useState hook管理了状态,使得它的定义更接近于类组件的行为,同时更易于阅读和维护。 

6、上下文

类组件:可以通过this.context访问上下文。需要在类组件上使用static contextType声明期望访问的上下文,或者使用contextTypes属性进行类型检查(使用React 16.6之前的API)。

import React, { Component } from 'react';class MyClassComponent extends Component {static contextType = MyContext; // 使用最新的context APIcomponentDidMount() {const data = this.context; // 访问上下文}render() {return <div>My Class Component</div>;}
}

函数组件(Function Component):可以使用useContext钩子从React获取上下文。

import React, { useContext } from 'react';function MyFunctionComponent() {const contextData = useContext(MyContext); // 使用hooks获取上下文return <div>My Function Component</div>;
}

注意:useContext只能在函数组件或者自定义钩子中使用。类组件不能使用这种方式访问上下文。

7、集成状态管理库

React中,类组件函数组件可以使用状态管理库来管理复杂的状态。常见的状态管理库有Redux、MobX、Context API等。

8、总结类组件、函数组件的优缺点

角度类组件函数组件
优点
  1. 完全控制:可以访问所有React生命周期的钩子。

  2. 状态(state)管理:可以维护和更新组件的状态。

  3. 复杂交互:类组件可以管理更复杂的交互,如动画、表单等。

  4. 性能优化:使用shouldComponentUpdate生命周期方法来优化渲染。

  1. 轻量级:函数组件不涉及创建类实例所带来的开销,并且它们自然阻止了this上的问题。

  2. 简单:代码通常更简洁,更容易编写和维护。

  3. Hooks:React 16.8+引入了Hooks,使函数组件可以使用状态(state)和其他React特性。

缺点
  1. 与函数组件相比,更多的开销,如创建类实例、绑定this等。

  2. 容易产生this指向问题,需要手动绑定this。

  1. 不能访问整个组件生命周期的所有钩子,例如componentDidCatch和componentDidMount。

  2. 对于复杂的交云,可能需要额外的库或自定义钩子。

  3. 不能使用ref属性,因为React无法在每次渲染时返回同一个函数实例。

相关文章:

React中类组件和函数组件的理解和区别

react代码模块分为类组件和函数组件。 从语法和定义、内部状态管理、生命周期、性能、可读性和维护性、上下文、集成状态管理库等角度对比React中类组件和函数组件。 1、语法和定义 类组件&#xff1a; 使用 ES6 的类&#xff08;class&#xff09;语法定义的 React 组件。…...

Day62||prim算法精讲 |kruskal算法精讲

prim算法精讲 53. 寻宝&#xff08;第七期模拟笔试&#xff09; 题目描述 在世界的某个区域&#xff0c;有一些分散的神秘岛屿&#xff0c;每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路&#xff0c;方便运输。 不同岛屿之间&#xff0c;路途距离不同&…...

upload-labs通关练习

目录 环境搭建 第一关 第二关 第三关 第四关 第五关 第六关 第七关 第八关 第九关 第十关 第十一关 第十二关 第十三关 第十四关 第十五关 第十六关 第十七关 第十八关 第十九关 第二十关 总结 环境搭建 upload-labs是一个使用php语言编写的&#xff0c…...

wordpress搭建主题可配置json

网站首页展示 在线访问链接 http://dahua.bloggo.chat/ 配置json文件 我使用的是argon主题&#xff0c;你需要先安装好主题&#xff0c;然后可以导入我的json文件一键配置。 需要json界面配置文件的&#xff0c;可以在评论区回复&#xff0c;看见评论我会私发给你。~...

RWKV-5/6 论文被 COLM 2024 收录

由 Bo PENG 和 RWKV 开源社区共同完成的 RWKV-5/6架构论文《Eagle and Finch: RWKV with Matrix-Valued States and Dynamic Recurrence》被顶级会议 COLM 2024 收录。 这是继 RWKV-4 架构论文《RWKV: Reinventing RNNs for the Transformer Era》被 EMNLP 2023 收录之后&…...

MinIO分片下载超大文件

一、前言 各位亲爱的们&#xff0c;之前介绍过了上传超大文件到MinIO&#xff1a; MinIO分片上传超大文件&#xff08;纯服务端&#xff09;MinIO分片上传超大文件&#xff08;非纯服务端&#xff09; 这里最后再补充一下从MinIO下载超大文件。 二、从MinIO分片下载大文件 …...

Vue3 -- 新组件【谁学谁真香系列6】

Teleport Teleport是什么?–Teleport是一种能够将我们的组件html结构移动到指定位置的技术。 父组件: <template><div calss="outer"><h2>我是App组件</h2><img src="https://z1.ax1x.com/2023/11/19/piNxLo4.jpg" alt=&qu…...

Openstack3--本地仓库搭建(ftp源搭建失败)

上传镜像 后面的ftp源做不了&#xff0c;请将下面的本地openstack源在控制节点和计算节点都配置 在控制节点上传&#xff0c;安装ftp并配置启动后再在计算节点配置 将openStack-train.iso文件通过MobaXterm远程连接软件上传至控制节点 /opt 目录下 挂载 进入 /opt 目录 创建…...

【初阶数据结构与算法】链表刷题之移除链表元素、反转链表、找中间节点、合并有序链表、链表的回文结构

文章目录 一、移除链表元素思路一思路二 二、合并两个有序链表思路&#xff1a;优化&#xff1a; 三、反转链表思路一思路二 四、链表的中间节点思路一思路二 五、综合应用之链表的回文结构思路一&#xff1a;思路二&#xff1a; 一、移除链表元素 题目链接&#xff1a;https:…...

【PGCCC】Postgresql Toast 原理

前言 上篇博客讲述了 postgresql 如何存储变长数据&#xff0c;它的应用主要是在 toast 。Toast 在存储大型数据时&#xff0c;会将它存储在单独的表中&#xff08;称为 toast 表&#xff09;。因为 postgresql 的 tuple&#xff08;行数据&#xff09;是存在在 Page 中的&…...

vue3使用element-plus,树组件el-tree增加引导线

vue3使用element-plus&#xff0c;树组件el-tree增加引导线 vue3项目element-plus&#xff0c;树组件el-tree增加引导线 element-plus组件库的el-tree样式 因为element的样式不满足当前的的需求&#xff0c;UI图&#xff0c;所以对el-tree进行增加了引导线 修改样式如下&am…...

AlphaFold3中文使用说明

目录 1. 在线网站用例1. 使用json输入预测蛋白结构 2. 本地命令行2.1 运行示例2.2 AF3输入输入格式JSON兼容性JSON最外层&#xff08;Top-level&#xff09;结构序列多序列比对MSA结构模板键 用户提供CCDs 2.3 AF3输出 AlphaFold3&#xff08;AF3&#xff09;可以通过在线网站或…...

使用@react-three/fiber,@mkkellogg/gaussian-splats-3d加载.splat,.ply,.ksplat文件

前言 假设您正在现有项目中集成这些包&#xff0c;而该项目的构建工具为 Webpack 或 Vite。同时&#xff0c;您对 Three.js 和 React 有一定的了解。如果您发现有任何错误或有更好的方法&#xff0c;请随时留言。 安装 npm install three types/three react-three/fiber rea…...

Koa进阶:掌握中间件和参数校验的艺术

目录 一、首先下载依赖 二、在index.js中引入koa-parameter&#xff0c;一般挂载这个中间件时会放在注册请求体的后面 三、使用实例 四、如果跟我们所需求的参数不同&#xff0c;返回结果直接会返回422 koa-parameter一般是用来校验请求传过来的参数是否是自己所需要的的 G…...

开源共建 | 长安链开发常见问题及规避

长安链开源社区鼓励社区成员参与社区共建&#xff0c;参与形式包括不限于代码贡献、文章撰写、社区答疑等。腾讯云区块链王燕飞在参与长安链测试工作过程中&#xff0c;深入细致地总结了长安链实际开发应用中的常见问题及其有效的规避方法&#xff0c;相关内容多次解答社区成员…...

【网络】深入理解 HTTPS:确保数据传输安全的核心协议

目录 引言一、HTTPS的基本概念1.1 什么是 HTTPS&#xff1f;1.2 HTTPS 的工作原理1.3 图解&#xff1a;HTTPS 通信过程1.4 HTTPS 与 HTTP 的区别1.5 为什么 HTTPS 更加重要&#xff1f; 二、SSL/TLS协议的核心2.1 SSL/TLS 协议的作用2.2 SSL/TLS 的工作流程2.2.1 握手阶段2.2.2…...

C/C++中使用MYSQL

首先要保证下载好mysql的库和头文件&#xff0c;头文件在/usr/include/mysql/目录下&#xff0c;库在/usr/lib64/mysql/目录下&#xff1a; 一般情况下&#xff0c;在我们安装mysql的时候&#xff0c;这些都提前配置好了&#xff0c;如果没有就重装一下mysql。如果重装mysql还是…...

【GD32】(一) 开发方式简介及标准库开发入门

文章目录 0 前言1 开发方式选择2 标准库模板的创建3 遇到的问题和解决方法 0 前言 因为项目关系&#xff0c;需要使用GD32。之前对此早有耳闻&#xff0c;知道这个是一个STM32的替代品&#xff0c;据说甚至可以直接烧录STM32的程序&#xff08;一般是同型号&#xff09;&#x…...

轻松上手:使用Docker部署Java服务

文章目录 1. 什么是Docker&#xff1f;2. 为什么使用Docker部署Java服务&#xff1f;3. 如何使用Docker部署Java服务&#xff1f;步骤1&#xff1a;创建Dockerfile步骤2&#xff1a;构建Docker镜像步骤3&#xff1a;运行Docker容器 4. 注意事项5. 结语推荐阅读文章 在当今的云计…...

wormml_vgg19

创建环境 mamba install libopencv hdf5 -c conda-forge conda create -n st python3.6.2手动导入包 mamba install blas1.0mkl -c conda-forge mamba install hdf51.8.20hac2f561_1 -c conda-forge mamba install libopencv3.4.2h20b85fd_0 -c conda-forge mamba install l…...

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

(转)什么是DockerCompose?它有什么作用?

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

以光量子为例,详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...