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无法在每次渲染时返回同一个函数实例。

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

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

相关文章

苹果 CMS 原生 Java 白菜影视 App 源码

源码介绍 苹果 CMS 原生 Java 白菜影视 App 源码是一款功能强大的影视应用程序&#xff0c;支持画中画、投屏、点播、播放前广告和支持普通解析等多种功能。与萝卜 App 源码相比&#xff0c;该套源码更加稳定&#xff0c;且拥有画中画投屏和自定义广告等功能&#xff0c;提高了…

三菱MR-J4-B系列伺服参数一览

要点 与伺服系统控制器连接后&#xff0c;同服系统控制器的伺服参数的值即被写入各参数中。根据伺服系统控制器的机种和伺服放大器软件版本及MRConfigurator2的软件版本&#xff0c;存在无法设定的参数或范围。详细内容请参照伺服系统控制器的用户手册。请使用MR Configurator2…

做遥感算法?GIS开发?新型测绘?哪个专业更注重编程能力?

遥感、地信、测绘三大地理行业&#xff0c;编程能力的重视程度各有不同: 遥感&#xff1a;编程服务算法 遥感行业通常与卫星、航空摄影和无人机等技术密切相关&#xff0c;遥感对编程的要求更多注重AI算法、机器学习、大数据等方面&#xff0c;包括神经网络&#xff0c;高斯过…

scala set训练

Set实训内容&#xff1a; 1.创建一个可变Set&#xff0c;用于存储图书馆中的书籍信息&#xff08;假设书籍信息用字符串表示&#xff09;&#xff0c;初始化为包含几本你喜欢的书籍 2.添加两本新的书籍到图书馆集合中&#xff0c;使用操作符 3.删除一本图书馆集合中的书籍&…

C++(二)

导言&#xff1a; 本文主要讲解linux中&#xff0c;使用vim编辑器编辑C语言。 本文将讲述上一篇文章中&#xff0c;代码的含义&#xff0c;以及C语言的简单使用。 一&#xff0c;代码解释。 #include <iostream> // 包含iostream库&#xff0c;用于输入输出操作 usin…

用 Python 写了一个天天酷跑(附源码)

Hello&#xff0c;大家好&#xff0c;给大家说一下&#xff0c;我要开始装逼了 这期写个天天酷跑玩一下叭&#xff01; 制作一个完整的“天天酷跑”游戏涉及很多方面&#xff0c;包括图形渲染、物理引擎、用户输入处理、游戏逻辑等。由于Python是一种高级编程语言&#xff0c;…

AI-基本概念-向量、矩阵、张量

1 需求 需求&#xff1a;Tensor、NumPy 区别 需求&#xff1a;向量、矩阵、张量 区别 2 接口 3 示例 4 参考资料 【PyTorch】PyTorch基础知识——张量_pytorch张量-CSDN博客

vue组件在项目中的常用业务逻辑(2)

完成一个项目的模块总体分为四步&#xff1a; 一、先静态页面 静态组件拆分出来 二、发请求(API) 三、vuex三连环 1.导入api里的search模块请求 2.捞那个请求的数据 先用async和await 再传值给result&#xff0c;添加空对象&#xff0c;派发actions&#xff1a; 3.在mutatio…

【算法】递归+深搜+哈希表:889.根据前序和后序遍历构造二叉树

目录 1、题目链接 相似题目: 2、题目 ​3、解法&#xff08;针对无重复值&#xff0c;哈希表递归&#xff09; 函数头-----找出重复子问题 函数体---解决子问题 4、代码 1、题目链接 889.根据前序和后序遍历构造二叉树&#xff08;LeetCode&#xff09; 相似题目: 105.…

微服务的注册中心Nacos

前言 Nacos是阿里巴巴开源的服务注册中心以及配置中心&#xff0c;致力于给开发者提供一款便捷、简单上手的开源框架。 Nacos究竟有什么惊人的地方呢&#xff1f;看下图&#xff1a; 从上图不难看出阿里巴巴的野心&#xff0c;一个Nacos干掉了Spring Cloud的三大组件&#xf…

蓝桥杯-网络安全比赛题目-遗漏的压缩包

小蓝同学给你发来了他自己开发的网站链接&#xff0c; 他说他故意留下了一个压缩包文件&#xff0c;里面有网站的源代码&#xff0c; 他想考验一下你的网络安全技能。 &#xff08;点击“下发赛题”后&#xff0c;你将得到一个http链接。如果该链接自动跳转到https&#xff0c;…

ubuntu中安装mysql

一、注意版本问题 ubuntu常用的版本是16.4&#xff0c;18.4,对应的mysql文件也不同&#xff0c;注意不要下载错误。 二、注意更换apt的源 sudo cat /etc/apt/sources.list查看现在的数据源&#xff0c;我更换了阿里的数据源。更换语句如下&#xff1a; sed -i s/http:\/\/…

java的体系结构

1. 题记&#xff1a; 其实很早就打算来写java的体系结构这一文章&#xff0c;但是有诸多担忧就一直搁置。其一担心自己水平有限&#xff0c;恐不能讲得太透彻&#xff0c;因为java的体系结构宏大精深。其二不知道怎么去把控文章的难度及深度&#xff0c;因为需要给大部分看&am…

PostgreSQL技术内幕17:PG分区表

文章目录 0.简介1.概念介绍2.分区表技术产生的背景3.分区类型及使用方式4.实现原理4.1 分区表创建4.2 分区表查询4.3 分区表写入4.4 分区表删除 0.简介 本文主要介绍PG中分区表的概念&#xff0c;产生分区表技术的原因&#xff0c;使用方式和其内部实现原理&#xff0c;旨在能…

Ubuntu - 进入紧急模式,无法进入桌面

目录 一、问题 二、分析原因 三、解决 四、参考 一、问题 重新安装VMVare之后&#xff0c;将之前的虚拟机加载不进来 二、分析原因 查看系统错误日志 journalctl -xb | grep Failed mnt挂载找不到了 三、解决 查看系统错误日志 如果是磁盘错误&#xff0c;此时终端会有…

【Spring】——SpringBoot项目创建

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 引入 一&#xff1a;介绍 二&#xff1a;Spring Boot项目创建 0&#xff1a;项目目录 1&#xff1a…

从0开始搭建一个生产级SpringBoot2.0.X项目(十二)SpringBoot接口SpringSecurity JWT鉴权

前言 最近有个想法想整理一个内容比较完整springboot项目初始化Demo。 SpringBoot接口权限控制 SpringSecurity 接口使用 Bearer token类型 JWT 鉴权 一、pom文件新增依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>s…

Maven 下载配置 详解 我的学习笔记

Maven 下载配置 详解 我的学习笔记 一、Maven 简介二、maven安装配置三、maven基本使用四、idea配置mavenidea配置maven环境maven坐标idea创建maven项目配置Maven-Helper插件 五、依赖管理 一、Maven 简介 Apache Maven 是一个项目管理和构建工具&#xff0c;它基于项目对象模型…

Windows Server2012 R2搭建NFS服务器

正文共&#xff1a;1024 字 23 图&#xff0c;预估阅读时间&#xff1a;1 分钟 在测试vCenter的集群操作时&#xff0c;出现了共享vSAN错误的问题&#xff0c;导致无法继续。我也只好先创建一个共享NFS&#xff08;Network File System&#xff0c;网络文件系统&#xff09;存储…

HarmonyOs DevEco Studio小技巧28--部分鸿蒙生命周期详解

目录 前言 页面和自定义组件生命周期 页面生命周期 onPageShow --- 表示页面已经显示 onPageHide --- 表示页面已经隐藏 onBackPress --- 表示用户点击了返回键 组件生命周期 aboutToAppear --- 表示组件即将出现 onDidBuild --- 表示组件已经构建完成 aboutToDisap…