react-创建组件的两种方式

一、函数式组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/babel">// 1.创建函数式组件function Demo() {return <h2>我是用函数定义的组件</h2>}// 2.渲染组件到页面ReactDOM.render(<Demo />, document.getElementById('test'))/*** 执行了ReactDOM.render(<MyComponent/>.....)之后,发生了什么?* 1.React解析组件标签,找到MyComponent组件。* 2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。* */</script>
</body></html>

二、类式组件

类式组件的话是通过es6的语法class来实现,通过通过创建一个类来继承React.Component父类,在定义的类组件中定义一个render()方法,该方法是放在该类实例对象的原型对象上的,ReactDOM.render内部通过new出来该类的实例,并通过该实例调用原型链上的render方法,将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello_react</title>
</head><body><!-- 准备好一个容器 --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="/react-development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="/react-dom-development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="/babel.min.js"></script><script type="text/babel">// 1.创建类式组件class MyComponent extends React.Component {render() {console.log(this);// render是放在哪里的?MyComponent的原型对象上,供实例使用。// render()中的this指向的是MyComponent组件实例对象return <h2>我是用函数定义的组件</h2>}}// 2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/*** 执行了ReactDOM.render(<MyComponent/>.....)之后,发生了什么?* 1.React解析组件标签,找到MyComponent组件。* 2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用原型链上的render方法* 3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。*/</script>
</body></html>

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

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

相关文章

ABS8-ASEMI新能源专用整流桥ABS8

编辑&#xff1a;ll ABS8-ASEMI新能源专用整流桥ABS8 型号&#xff1a;KBL410 品牌&#xff1a;ASEMI 封装&#xff1a;ABS-4 最大重复峰值反向电压&#xff1a;800V 最大正向平均整流电流(Vdss)&#xff1a;1A 功率(Pd)&#xff1a;小功率 芯片个数&#xff1a;4 引脚…

夜神、雷电、android studio手机模拟器资源占用情况

夜神、雷电、android studio手机模拟器内存资源占用情况 由于开发电脑只有16G内存&#xff0c;出于开发需要和本身硬件资源的限制&#xff0c;对多个手机模拟器进行了机器资源占用&#xff08;主要是内存&#xff09;的简单比较。 比较的模拟器包括&#xff1a; 1. Android S…

vue2知识点————(vue插槽,透传 Attributes )

vue 插槽 插槽&#xff08;slot&#xff09;是一种强大的特性&#xff0c;允许在组件的模板中定义带有特定用途的“插槽”&#xff0c;然后在组件的使用者中填充内容。插槽能够使组件更加灵活&#xff0c;让组件的结构更容易复用和定 具名插槽&#xff08;Named Slots&#x…

PHP利用phpmailer实现邮件发送功能

要在PHP中实现发送邮件验证码的功能,你需要使用一些特定的库来帮助你处理邮件发送的任务。PHPMailer是一个常用的库,它可以帮助你轻松地发送电子邮件。 以下是一个简单的例子,展示了如何使用PHPMailer库来发送包含验证码的电子邮件: 首先,你需要安装PHPMailer库。你可以通…

微信小程序有的机型无法播放m3u8格式的直播流,使用H5在微信环境里播放

我这测试鸿蒙的还有苹果X及部分机型在微信小程序里无法播放&#xff0c;不知道什么原因&#xff1b; 直播流地址有的是hevc有的是h.264&#xff0c;音频都是aac&#xff1b; <head><meta charset"UTF-8"><title>前端播放m3u8格式视频</title&g…

MATLAB 向量

MATLAB 向量 向量是一维数字数组。MATLAB允许创建两种类型的向量 行向量 列向量 行向量 行向量通过将元素集括在方括号中并使用空格或逗号定界元素来创建。 示例 r [7 8 9 10 11] MATLAB将执行上述语句并返回以下结果- r 7 8 9 10 11 列向量 列向量 通过将元素集括在方…

c++ 新特性 std::bind 简单实验

1.概要 std::bind 是 C11 引入的一个功能&#xff0c;它用于绑定函数/可调用对象到特定的参数&#xff0c;并生成一个新的可调用对象。这个新的可调用对象可以稍后调用&#xff0c;就像调用原始函数/可调用对象一样&#xff0c;但会带有预先绑定的参数。 std::placeholders::…

操作系统安全:Linux安全审计,Linux日志详解

「作者简介」&#xff1a;2022年北京冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础对安全知识体系进行总结与归纳&#xff0c;著作适用于快速入门的 《网络安全自学教程》&#xff0c;内容涵盖系统安全、信息收集等…

区块链技术与应用学习笔记(10-11节)——北大肖臻课程

目录 10.分岔 ①什么是分叉&#xff1f; ②导致分叉的原因&#xff1f; ③在比特币新共识规则发布会会导致什么分叉&#xff1f; 什么是硬分叉&#xff1f; 硬分叉例子&#xff1f; 什么是软分叉&#xff1f; 软分叉和硬分叉区别&#xff1f; 软分叉实例 11.问答 转…

【从后端日志文件中过滤出sql语句】

从后端日志文件中过滤出sql语句 why?思路日志文件的格式 结果 why? 为什么会有这种需求&#xff1f;&#xff0c;mysql数据不小心被删了完全可以从备份数据恢复&#xff0c;或者从binlog中恢复&#xff0c;但是如果前面这两种方法没办法处理&#xff08;没有备份数据库文件、…

科技云报道:走入商业化拐点,大模型“开箱即用”或突破行业困局

科技云报道原创。 大模型加速狂飙&#xff0c;AI商业化却陷入重重困境。 一方面&#xff0c;传统企业不知道怎么将AI融入原始业务&#xff0c;另一方面&#xff0c;AI企业难以找到合适的商业化路径。 纵观海外AI玩家&#xff0c;已经有许多企业趟出了自己的商业化道路。 微…

59、回溯-括号生成

思路&#xff1a; 括号是成对出现&#xff0c;首先左括号可以放n个&#xff0c;右括号也可以放n个。如果当前左括号放了3了&#xff0c;右括号放了4个&#xff0c;错了&#xff0c;如果左括号放了5个&#xff0c;右括号放了4个。可以&#xff0c;继续放右括号即可。所以可以设…

数据结构概念

一、介绍 数据结构是计算机科学中的一个核心概念&#xff0c;它涉及到如何在计算机中有效地组织、存储和管理数据&#xff0c;以支持各种算法和应用程序的高效运行。 数据结构不仅是数据元素&#xff08;如整数、字符串、对象等&#xff09;的集合&#xff0c;更关键的是这些…

贪吃蛇项目实践!(上)

大家好&#xff0c;今天我带着大家从0构建起贪吃蛇项目的高楼大厦~ 要实现这个游戏&#xff0c;我们需要实现哪些功能呢&#xff1f; 实现基本的功能&#xff1a; • 贪吃蛇地图绘制 • 蛇吃⻝物的功能&#xff08;上、下、左、右⽅向键控制蛇的动作&#xff09; • 蛇撞墙死…

matlab保存示波器数据

再重新运行一下示波器 然后就可以在工作区看见&#xff08;这里没有运行所以没有&#xff09; 将保存到文件夹中方便后续绘图

华为云FunctionGraph构建高可用系统的实践

导语 每年&#xff0c;网上都会报道XXX系统异常不可用&#xff0c;给客户带来巨大的经济损失。云服务的客户基数更大&#xff0c;一旦出现问题&#xff0c;都将给客户和服务自身带来极大影响。本文将基于华为云FunctionGraph自身的实践&#xff0c;详细介绍如何构建高可用的Se…

权威认证!瀚高股份IvorySQL通过强制性国标GB18030-2022最高级别认证

近日&#xff0c;GB 18030-2022《信息技术 中文编码字符集》应用推广大会暨“汉字守护计划”成果发布会在京召开。瀚高股份开源关系型数据库IvorySQL通过 GB 18030-2022《信息技术 中文编码字符集》强制性国家标准测试&#xff0c;达到最高实现级别&#xff08;3级&#xff09;…

基于springboot实现海滨学院班级回忆录的设计项目【项目源码+论文说明】计算机毕业设计

基于springboot实现海滨学院班级回忆录的设计演示 摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了海滨学院班级回忆录的开发全过程。通过分析海滨学院班级回忆录管理的不足&#xff0c;创建了一个计算机管理海…

【Pytorch】(十五)模型部署:ONNX和ONNX Runtime

文章目录 &#xff08;十五&#xff09;模型部署&#xff1a;ONNX和ONNX RuntimeONNX 和 ONNX Runtime的关系将PyTorch模型导出为ONNX格式使用Netron可视化ONNX模型图检查ONNX模型验证ONNX Runtime推理结果使用ONNX Runtime运行超分模型 &#xff08;十五&#xff09;模型部署&…

第十五届蓝桥杯省赛第二场C/C++B组D题【前缀总分】题解(AC)

暴力解法 O ( 26 n 5 ) O(26n^5) O(26n5) 枚举将第 i i i 个字符串的第 j j j 个字符改为 c c c 的所有方案&#xff0c;时间复杂度 O ( 26 n 2 ) O(26n^2) O(26n2)&#xff0c;修改并计算总分&#xff0c; O ( n 3 ) O(n^3) O(n3)。 暴力优化 O ( 26 n 3 log ⁡ n ) O…