【 React 】对React中类组件和函数组件的理解?有什么区别?

相关文章:
1 React 中的类组件
2 React中的函数组件

1. 类组件

类组件,也就是通过使用ES6类的编写形式去编写组件,该类必须继承React.Component

如果想要访问父组件传递过来的参数,可以通过this.props方式去访问
在组件中必须实现render方法,再通return中返回React对象

// 类组件
class Hello extends React.Component{constructor(props){super(props)}render(){return <h1>hello,{this.props.name}</h1>}
}

2. 函数组件

函数组件,就是通过函数编写的形式去实现一个React组件,是React中定义组件最简单的方式

//函数组件
function Hello(props){return <h1>hello,{props.name}</h1>}

函数组件第一个参数为props 用于接收父组件传递过来的参数

3. 区别

针对两种React组件,其区别主要分成以下几个方向:

  • 编写形式
  • 状态管理
  • 生命周期
  • 调用方式
  • 获取渲染的值

3.1 编写形式

两种最明显的区别在于编写的形式不同,同一种功能的实现可以分别对应类组件和函数组件的编写形式

3.2 状态管理

在hooks出来之前,函数组件就是无状态组件,不能保管组件的状态,不像类组件中调用的setState
如果想要管理state状态,可以用useState,如下:

const FunctionComponent=()=>{const [count,setCount]=React.useState(0);return (<div><p>count:{count}</p><button onClick={()=>{setCount(count+1)}}>Click</button></div>)
}

在使用hooks情况下,一般如果函数组件调用state,则需要创建一个类组件或者state提升到你的父组件中,然后通过props对象传递到子组件

3.3 生命周期

在函数组件中,并不存在生命周期 ,这是因为这些生命周期钩子都来自于继承的React.Component 所以,如果用到生命周期,就只能使用类组件
但是函数组件使用useEffect也能够完成替代生命周期的作用,这里给出一个简单例子

const FunctionComponent=()=>{useEffect(()=>{console.log('hello')},[])return <h1>hello,world</h1>}

上述例子对应类组件中的componentDidMount 生命周期
如果useEffect回调函数中return 一个函数,则return 函数会在组件卸载的时候执行,整如componentWillUnmount

const FunctionComponent=()=>{React.useEffect(()=>{return ()=>{console.log('bye')}},[])return <h1>bye,world</h1>}

3.4 调用方式

如果是一个函数组件,调用则执行函数即可:

function SayHi(){return <p>hello ,rui </p>
}
const result=SayHi(props) //<p>hello ,rui </p>

如果是一个类组件,则需要将组件进行实例化,然后调用 实例对象render方法:

//自己的代码
class SayHi extends React.Component{render(){return <h1>hello,rui</h1>}
}
//React 内部
const instance=new SayHi(props) //SayHi{}
const result=instance.render() //<p>hello ,rui </p>

3.5 获取渲染的值

函数组件代码对应如下

function ProfilePage(props) {const showInfo=()=>{alert('Hi'+props.user)}const handleClick=()=>{setTimeout(showInfo,5000)}return <button onClick={handleClick}>Hi</button>
}

类组件代码对应如下

class ProfilePage extends React.Component{showInfo(){alert('Hi'+this.props.user)  }handleClick(){setTimeout(this.showInfo.bind(this),5000)}render(){return <button onClick={this.handleClick.bind(this)}>Hi</button>}
}

两者看起来实现的功能是一致的,但是在类组件中,输出this.props.user,Props在React中是不可变的所以他永远不会改变,但是this总是可变的,以便在render和生命周期函数中读取新版本

因此,如果我们的组件在请求运行时更新。this.props将会改变。showInfo方法从最新的props中读取user

函数组件,本身就不存在this,props 并不发生改变,因此同样点击,alert 的内容仍旧是之前的内容

4.总结

函数组件语法更短、更简单,这使得它更容易开发、测试和理解 。
类组件会因为大量使用this让人困惑。

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

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

相关文章

RabbitMQ的web控制端介绍

2.1 web管理界面介绍 connections&#xff1a;无论生产者还是消费者&#xff0c;都需要与RabbitMQ建立连接后才可以完成消息的生产和消费&#xff0c;在这里可以查看连接情况channels&#xff1a;通道&#xff0c;建立连接后&#xff0c;会形成通道&#xff0c;消息的投递、获取…

Vue-Router使用

1.安装 npm install vue-router4 2. 添加路由 新建router文件夹&#xff0c;新建文件 index.ts import { createRouter, createWebHashHistory,createWebHistory} from "vue-router";const routes [{path: /login,component: () > import("../views/Logi…

[leetcode 169][多数元素]

[leetcode 169][多数元素] 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,3] …

[XS2123] 集成功率 MOSFET V1.0, IEEE 802.3af 兼容的 PD 和 DC/DC 控制器

[XS2123] 集成功率 MOSFET V1.0&#xff0c; IEEE 802.3af 兼容的 PD 和 DC/DC 控制器 概述 XS2123 是一款基于 IEEE 802.3af 标准 PD 和DC/DC 集成的控制器。 该芯片的 PD 控制器部分为用电设备&#xff08;PD&#xff09;提供符合以太网供电&#xff08;PoE&a…

牛客网——美团2024届秋招笔试第三场编程真题

牛客网——美团2024届秋招笔试第三场编程真题 &#x1f60d;&#x1f60d;&#x1f60d; 相知&#x1f64c;&#x1f64c;&#x1f64c; 相识&#x1f622;&#x1f622;&#x1f622; 开始刷题1. 平均数为k的最长连续子数组2. 小球投盒3. 小红结账4. 小美的游戏5. 小美种果树6…

小米汽车上市进入倒计时,已开启内部试驾

在十四届全国人大二次会议上&#xff0c;全国人大代表、小米集团创始人、董事长CEO雷军回应了小米汽车的最新消息&#xff0c;小米汽车预计很快就要正式上市。 小米汽车推出了两款车型&#xff1a;SU7和SU7 Max。这两款车型均为纯电轿车&#xff0c;带来了不同的配置和性能特点…

python自学6

第一节第十章 开发图表 第一个可视化图表&#xff0c;折线图的开发 json数据格式 pyecharts模块 图标源码网站 Document gallery.pyecharts.org pyecharts模块的快速入门 pyecharts配置有两个选项 全局配置是对整个可视化界面进行配置&#xff0c;比如名字&#xff0c;工具…

代码复现错误

1. 问题&#xff1a; torch.cuda.OutOfMemoryError: CUDA out of memory. Tried to allocate 64.00 MiB (GPU 0; 39.59 GiB total capacity; 37.72 GiB already allocated; 38.19 MiB free; 37.83 GiB reserved in total by PyTorch) If reserved memory is >> allocat…

防御保护 IPSEC VPPN实验

实验背景&#xff1a;FW1和FW2是双机热备 主备备份模式。 实验要求&#xff1a;在FW5和FW3之间建立一条IPSEC通道&#xff0c;保证10.0.2.0/24网段可以正常访问到192.168.1.0/24 IPSEC VPPN实验配置&#xff08;由于是双机热备状态&#xff0c;所以FW1和FW2只需要配置FW1主设…

【MGR】MySQL Group Replication 要求与限制

目录 17.3 Requirements and Limitations 17.3.1 Group Replication Requirements Infrastructure Server Instance Configuration 17.3.2 Group Replication Limitations Limit on Group Size Limits on Transaction Size 17.3 Requirements and Limitations 这个部分列…

项目人都应该来看看!!揭秘项目崩盘背后的逻辑,NFG数藏成破局关键

每天五分钟一套互联网知识&#xff0c;大家好我是啊浩说模式 在投资领域&#xff0c;项目泡沫崩盘是一个屡见不鲜的现象。当某个项目或行业被过度炒作&#xff0c;市场参与者纷纷涌入&#xff0c;推动价格不断攀升&#xff0c;直至形成一个看似坚不可摧的泡沫。然而&#xff0c…

用FPGA CORDIC IP核实现信号的相位检测,计算相位角

用FPGA CORDIC IP核实现信号的相位检测 1.matlab仿真 波形仿真代码&#xff1a; 代码功能&#xff1a;生成一个点频信号s&#xff0c;求出s的实部和虚部&#xff1b;并且结算相位角atan2。画出图形&#xff0c;并且将Q和I数据写入文件中。 %代码功能&#xff1a;生成一个点…

20.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据分析工具数据类型编辑功能的实现

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易道云信息技术研究院VIP课 上一个内容&#xff1a;19.数据分析工具数据类型配置功能的实现 码云地址&#xff08;master 分支&#…

unity学习(49)——服务器三次注册限制以及数据库化角色信息4--角色信息数据库化

1.此处下断开始调试,list函数内就有问题&#xff1a; 2. 现在的问题是只读不写&#xff01;32行就是写入部分的代码&#xff1a; 3. 很奇怪&#xff0c;调试的时候确实是写进来了 程序正常执行后&#xff0c;文件中数据也没有消失 关闭服务器文件内容依旧正常。 players包含所…

Lc11. 盛最多水的容器

题目&#xff1a;给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 思路&#xff1a;定义两个指…

MySQL篇—执行计划之覆盖索引Using index和条件过滤Using where介绍(第三篇,总共三篇)

☘️博主介绍☘️&#xff1a; ✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ ✌✌️擅长Oracle、MySQL、SQLserver、Linux&#xff0c;也在积极的扩展IT方向的其他知识面✌✌️ ❣️❣️❣️大佬们都喜欢静静的看文章&#xff0c;并且也会默默的点赞收藏加关注❣…

正态性检验方法汇总

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

提醒一下!今年考研的人不要太老实了!!

今年准备计算机考研的同学&#xff0c;别太老实了&#xff01;别人说什么你就信什么 如果你的工作能力不足以支撑找到一个满意的工作&#xff0c;那我建议再沉淀两年&#xff01; 很多同学其实有点眼高手低&#xff0c;在计算机专业&#xff0c;低于1w的工作看不上&#xff0…

操作系统引导

目录 一. 什么是操作系统引导 \quad 一. 什么是操作系统引导 \quad 什么是操作系统引导: 就是在开机的时候, 怎么让操作系统运行起来 操作系统是安装在C盘的 分区表用来说明C,D,E,F盘的存储空间 RAM一关机, 里面的数据就会被清空, ROM则不会 MBR里面的程序被读到RAM里面, 那…

蓝桥杯2023年-颜色平衡树(哈希表,dfs,map作返参)

题目描述 给定一棵树&#xff0c;结点由 1 至 n 编号&#xff0c;其中结点 1 是树根。树的每个点有一个颜色 Ci。 如果一棵树中存在的每种颜色的结点个数都相同&#xff0c;则我们称它是一棵颜色平衡树。 求出这棵树中有多少个子树是颜色平衡树。 思路 &#xff08;map作返…