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

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

  • 回答思路:类组件-->函数组件-->区别
    • 类组件
    • 函数组件
    • 区别
      • 编写形式不同:
      • 状态管理不同:
      • 生命周期不同:
      • 调用方式的不同:
      • 获取渲染的值的方式不同
      • 小结:

回答思路:类组件–>函数组件–>区别

类组件

通过ES6类的编写形式去编写组件,该类必须继承React.Component,通过this.props的方式去访问父组件传递过来的参数,且在类组件中必须使用render方法,在return中返回React对象,如下:

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

函数组件

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

function Example(props){return <h1>hello,{props.name}</h1>;
}

区别

1.编写形式不同
2.状态管理不同
3.生命周期不同
4.调用方式不同
5.获取渲染的值的方式不同

编写形式不同:

函数组件:

function Example(props){return <h1>hello,{props.name}</h1>;
}

类组件:

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

状态管理不同:

在hooks出来之前,函数组件是无状态组件,不能保管组件的状态,类组件使用setState来保管
函数组件:

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

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

生命周期不同:

函数组件不存在生命周期,生命周期钩子都来自于继承React.Component,所以只有类组件有生命周期,但是函数组件使用useEffect也能够完成替代生命周期的作用,例如:

const Example = () =>{useEffect(()=>{console.log("Hello");},[]);return <h1>hello</h1>;
}

这里的useEffect就相当于类组件中的componentDidMount生命周期,如果在useEffect中return一个函数,这个函数会在组件卸载的时候执行,相当于componentWillUnmount
例如:

const Example = () =>{useEffect(()=>{return ()=>{console.log("bye");	};},[]);return <h1>hello</h1>;
}

调用方式的不同:

函数组件:

const Example = () =>{return <h1>hello</h1>;
}
// React内部
const result = Example(props) //<h1>hello</h1>

类组件:

class Example extends React.Component{render(){return <h1>hello</h1>}}
// React内部
const instance = new Example(props) //Example{}
const result = instance.render() //<h1>hello</h1>

获取渲染的值的方式不同

函数组件中获取值不需用this,如直接使用props.name,但是在类组件中必须要加上this,如this.props.name,两者看起来实现功能是一致的,但是在组件中,输出this.props.name,props在react中是不可改变的,但是this总是可以改变的,可以在render和生命周期函数中读取新版本,因此我们在组件请求运行时更新,this.props将会改变,而在函数组件中,不存在this,props并不会发生改变,因此函数组件在请求运行时更新,props不发生改变,props.name还是旧的name

小结:

两种组件都有各自的优缺点,函数组件语法更短、更简单,这使得它更容易开发、理解和测试,类组件使用大量的this,不易理解

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

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

相关文章

文本生成中的解码器方法

一.解码器的基本介绍 在文本生成任务中&#xff0c;解码器是生成序列的关键组件。解码器的目标是从先前生成的标记或隐藏状态中生成下一个标记。有几种方法用于设计文本生成中的解码器&#xff0c;以下是一些常见的解码器方法&#xff1a; Teacher Forcing&#xff08;教师强…

自己动手造一个状态机

自己动手造一个状态机 引言有限自动状态机 (FSM)五要素应用场景优势 开源产品造个轮子改造点Looplab fsm示例演示实现解析 改造过程 引言 有限自动状态机 (Finite-state machine , FSM) 通常用来描述某个具有有限个状态的对象&#xff0c;并且在对象的生命周期中组成了一个状态…

flink基本概念

1. Flink关键组件: 这里首先要说明一下“客户端”。其实客户端并不是处理系统的一部分&#xff0c;它只负责作业的提交。具体来说&#xff0c;就是调用程序的 main 方法&#xff0c;将代码转换成“数据流图”&#xff08;Dataflow Graph&#xff09;&#xff0c;并最终生成作业…

堆详解与优先级队列

导言&#xff1a; 我们知道队列是一种先进先出(FIFO)的数据结构&#xff0c;但是现实情况中&#xff0c;操作的数据有可能会有优先级&#xff0c;优先级高的数据要先出队。例如&#xff0c;医院的军人优先等等。而为此应运而生的就是优先级队列&#xff0c;java中可以使用Prio…

力扣hot100 相交链表 超全注释 满级表达

Problem: 160. 相交链表 文章目录 思路复杂度&#x1f496; Ac Code 思路 &#x1f468;‍&#x1f3eb; 参考题解 &#x1f469;‍&#x1f3eb; 参考图解 复杂度 时间复杂度: O ( n m ) O(nm) O(nm) 空间复杂度: 添加空间复杂度, 示例&#xff1a; O ( 1 ) O(1) O(…

详谈c++智能指针!!!

文章目录 前言一、智能指针的发展历史1.C 98/03 的尝试——std::auto_ptr2.std::unique_ptr3.std::shared_ptr4.std::weak_ptr5.智能指针的大小6.智能指针使用注意事项 二、智能指针的模拟实现三、C11和boost中智能指针的关系 前言 C/C 语言最为人所诟病的特性之一就是存在内存…

Docker是什么

docker本质 Docker 本质其实是 LXC 之类的增强版&#xff0c;它本身不是容器&#xff0c;而是容器的易用工具。容器是 linux 内核中的技术&#xff0c;Docker 只是把这种技术在使用上简易普及了。Docker 在早期的版本其核心就是 LXC 的二次封装发行版。 Docker 作为容器技术的…

开发第一个Flutter App需要注意什么

Flutter这些年发展的很快&#xff0c;特别是在 Google 持续的加持下&#xff0c;Flutter SDK 的版本号已经来到了 3开头&#xff0c;也正式开始对 Windows、macOS 和 Linux 桌面环境提供支持。如果从 Flutter 特有的优势来看&#xff0c;我个人认为主要是它已经几乎和原生的性能…

换手机后:旧手机备忘录怎么导入新手机里?

现在新手机层出不穷&#xff0c;大家都爱换手机来体验新功能&#xff0c;但在换手机的时候&#xff0c;数据传输是非常麻烦的一件事情。 每次换手机&#xff0c;就像是搬一次家。老房子里的点点滴滴&#xff0c;那些重要的、不重要的&#xff0c;都得一一打包&#xff0c;再在…

DSP Bootloader

DSP Bootloader Refer: DSP Bootloader开发思路讲解

字符串展开(Python)

展开字符串中用-压缩的连续小写字母或者数字&#xff0c;不是压缩形式的-不用理会&#xff0c;-没有压缩字符的去除-。 (笔记模板由python脚本于2024年01月21日 18:18:19创建&#xff0c;本篇笔记适合熟悉 p y t h o n python python字符串和列表的coder翻阅) 【学习的细节是欢…

SAP屏幕开发之Listbox下拉列表

文章目录 前言一、案例介绍二、静态下拉列表 a.绘制并设置属性 b.两种属性区别以及效果展示 三、动态下拉列表 a.绘制下拉列表 b.调用函数绑定 四、总结 前言 这篇文章给大家介绍一下SAP Dialog程序中 Listbox控件 的使用&#xf…

如何搭建MariaDB并实现无公网ip环境远程连接本地数据库

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 1. 配置MariaDB数据库1.1 安装MariaDB数据库1.2 测试局域网内远程连接 2. 内网穿透2.1 创建隧道映射…

3.conda的使用

anaconda安装 ubuntu 安装conda 系统架构 uname -m打开终端&#xff0c;不启动base conda config --set auto_activate_base falseconda命令使用 1.查看conda版本 conda --version2.查看conda配置环境 conda config --show3.设置镜像 #设置清华镜像 conda config --add…

多级缓存

一、多级缓存 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未命中则查询数据库&#xff0c;如图&#xff1a; 存在下面的问题&#xff1a; •请求要经过Tomcat处理&#xff0c;Tomcat的性能成为整个系统的瓶颈 •Redis缓存失效时&#xff…

vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法

文章目录 第一步&#xff1a;在项目public文件夹下创建一个login.html&#xff0c;其实就是将index.html复制一份&#xff0c;将title改一下&#xff1a;login.html 第二步&#xff1a;在src文件夹下创建一个login文件夹&#xff0c;分别创建login.main.js、login.router.js、l…

利用Facebook广告进行品牌宣传,有什么建议吗

利用Facebook广告进行品牌宣传&#xff0c;以下是一些建议&#xff1a; 明确品牌定位和目标受众&#xff1a;在制定广告策略之前&#xff0c;需要明确品牌的定位和目标受众&#xff0c;以确保广告内容与目标受众的兴趣和需求相符合。同时&#xff0c;要根据品牌的特点和目标受…

【Ubuntu】Ubuntu安装微信

1. 优麒麟 Wine &#xff08;“Wine Is Not an Emulator(Wine不是一个模拟器)” 的缩写&#xff09;是一个能够在多种 POSIX-compliant 操作系统&#xff08;诸如 Linux&#xff0c;Mac OSX 及 BSD 等&#xff09;上运行 Windows 应用的兼容层。银河麒麟的操作系统也是基于Ubu…

package.json包版本控制方法介绍

最近一个 Vue 3 Spring boot 的项目在生产环境打包失败了&#xff0c;排查下了原因&#xff0c;发现是版本没有锁定导致的&#xff0c;因为在开发环境&#xff0c;我们的机器都可以连通外网去下载依赖&#xff0c;但生产环境nexus一般都会限制网络访问&#xff0c;所以某些不匹…