React组件(函数式组件,类式组件)

函数式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React Demo</title>  <!-- 引入React -->  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <!-- 引入ReactDOM -->  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  <!-- 引入Babel用于转换JSX(如果你不是通过构建工具如Webpack来转换的话) -->  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body><div id="test"></div> <script  type="text/babel">///1、函数式组件function Demo() {return  <h2>我是哈哈哈 适用于【简单组件】</h2>}// 2、渲染ReactDOM.render(<Demo/>,document.getElementById('test'))</script>
</body>
</html>

在这里插入图片描述

类式组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>React Demo</title>  <!-- 引入React -->  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <!-- 引入ReactDOM -->  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>  <!-- 引入Babel用于转换JSX(如果你不是通过构建工具如Webpack来转换的话) -->  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>  
</head>
<body><div id="test"></div> <script  type="text/babel">// 1、创建类式组件class MyDemo extends React.Component {//render是放在哪里的?- MyComponent的原型对象上,供实例使用。//render中的this是谁?- MyComponent的实例对象<=>MyComponent组件实例对象。render() {return <h2>我是嘻嘻,适用于【复杂组件】</h2>}}///2、渲染ReactDOM.render(<MyDemo/>,document.getElementById('test'))/*执行了ReactDoM.render(<Mycomponent/>.......之后,发生了什么?1.React解析组件标签,找到了MyComponent组件。2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。*/</script>
</body>
</html>

效果图
在这里插入图片描述

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

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

相关文章

基于FPGA加速的bird-oid object算法实现

导语 今天继续康奈尔大学FPGA 课程ECE 5760的典型案例分享——基于FPGA加速的bird-oid object算法实现。 &#xff08;更多其他案例请参考网站&#xff1a; Final Projects ECE 5760&#xff09; 1. 项目概述 项目网址 ECE 5760 Final Project 模型说明 Bird-oid object …

镭雕机:如何利用激光技术实现高质量的产品标记

镭雕机是一种利用激光技术实现高质量产品标记的设备。它通过激光束在各种不同的物质表面进行精确的打标&#xff0c;可以产生永久性的标记效果&#xff0c;这些标记不仅精美&#xff0c;而且具有高度的精度和清晰度。以下是镭雕机如何利用激光技术实现高质量产品标记的详细过程…

寄存器(内存访问)

文章目录 寄存器&#xff08;内存访问&#xff09;1 内存中字的存储2 DS和[address]3 字的传送4 mov、add、sub指令5 数据段6 栈7 CPU提供的栈机制8 栈顶超界的问题9 push、pop指令10 栈段 寄存器&#xff08;内存访问&#xff09; 1 内存中字的存储 CPU中&#xff0c;用16位寄…

Spring Cloud Gateway如何实现熔断

Spring Cloud Gateway熔断集成 熔断应用&#xff1a; 金融市场中的熔断机制&#xff1a;在金融交易系统中&#xff0c;熔断机制&#xff08;Circuit Breaker&#xff09;是一种市场保护措施&#xff0c;旨在预防市场剧烈波动时可能导致的系统性风险。当某个基准指数&#xff08…

基于Ambari搭建大数据分析平台

一、部署工具简介 1. Hadoop生态系统 Hadoop big data ecosystem in Apache stack 2. Hadoop的发行版本 Hadoop的发行版除了Apache的开源版本之外&#xff0c;国外比较流行的还有&#xff1a;Cloudera发行版(CDH)、Hortonworks发行版&#xff08;HDP&#xff09;、MapR等&am…

【网络安全】-数字证书

数字证书 数字证书是互联网通讯中用于标志通讯各方身份信息的一串数字或数据&#xff0c;它为网络应用提供了一种验证通信实体身份的方式。具体来说&#xff0c;数字证书是由权威的证书授权&#xff08;CA&#xff09;中心签发的&#xff0c;包含公开密钥拥有者信息以及公开密…

linux中将终端Terminal添加到任务栏

问题描述 如题&#xff0c;默认的任务栏中没有终端这一组件&#xff0c;因此&#xff0c;想要打开终端&#xff0c;需要先切换到桌面&#xff0c;影响了使用体验。 解决方法 1.在applications里找到Terminal Emulator。 2.将Terminal Emulator拖动到任务栏&#xff0c;即可…

【完美实现】VITE + VUE3 + SVG图片解析+element-plus开发环境初始化(基于macos)

一、最终效果 废话少说&#xff0c;直接上效果 这是我的初始化程序提供的页面&#xff0c;在这个页面上实现了一下几个功能&#xff1a; 1、vite初始化之后的路由安装和初始化&#xff1b; 2、标准SVG的解析&#xff0c;并可调整大小、颜色&#xff1b; 3、element-plus的安…

Websocket在Asp.net webApi(.net framework)上的应用

之前在写看板部分的web api的时候&#xff0c;都是通过Ajax在规定时间内轮询调用web api&#xff0c;这样简单省事&#xff0c;但是当看板多了&#xff08;并发量上来&#xff09;以后&#xff0c;比较消耗服务器的性能&#xff0c;所以最近研究了websocket&#xff0c;希望使用…

运放的基础知识

运算放大器&#xff08;Operational Amplifier&#xff0c;简称运放&#xff09;是一种直流耦合、差模&#xff08;差动模式&#xff09;输入的高增益电压放大器&#xff0c;通常具有单端输出。它能产生一个相对于输入端电势差大数十万倍的输出电势&#xff08;对地而言&#x…

Jenkins Pipeline实现Golang项目的CI/CD

Jenkins Pipeline实现Golang项目的CI/CD 背景 最近新增了一个Golang实现的项目&#xff0c;需要接入到现有的流水线架构中。 流程图 这边流程和之前我写过的一篇《基于Jenkins实现的CI/CD方案》差不多&#xff0c;不一样的是构建现在是手动触发的&#xff0c;没有配置webho…

蓝桥杯倒计时 36天-DFS练习

文章目录 飞机降落仙境诅咒小怂爱水洼串变换 飞机降落 思路&#xff1a;贪心暴搜。 #include<bits/stdc.h>using namespace std; const int N 10; int t,n; //这题 N 比较小&#xff0c;可以用暴力搜搜复杂度是 TN*N! struct plane{int t,d,l; }p[N]; bool vis[N];//用…

OceanBase中binlog service 功能的试用

OBLogProxy简介 OBLogProxy即OceanBase的增量日志代理服务&#xff0c;它可与OceanBase建立连接并读取增量日志&#xff0c;从而为下游服务提供了变更数据捕获&#xff08;CDC&#xff09;的功能。 关于OBLogProxy的详尽介绍与具体的安装指引&#xff0c;您可以参考这篇官方OB…

RocketMQ快速入门_2. rocketmq 的应用场景、与其他mq的差异

0. 引言 之前我们讲解过rabbitMQ&#xff0c;本期我们将进入吞吐量更加强大的rocketMQ的学习。 1. 基础概念 如果你是刚接触MQ的同学&#xff0c;还不清楚消息队列的基础概念的&#xff0c;可以参考我之前这篇文章&#xff1a; https://wu55555.blog.csdn.net/article/deta…

IOS降级后从高版本到低版本恢复备份

IOS降级后从高版本到低版本恢复备份 此方法只适用于小版本还原&#xff0c;比如17.4->17.3&#xff0c;未验证大版本恢复可行性手机型号&#xff1a;iphone 13pro 系统版本&#xff1a;17.4 降级版本&#xff1a;17.3.1 步骤 通过itunes或者MacOS系统下对当前版本进行备份…

C++中的STL-string类

文章目录 一、为什么学习string类&#xff1f;1.1 C语言中的字符串 二、准库中的string类2.2 string类2.3 string类的常用接口说明2.4 string类对象的容量操作2.5 string类对象的访问及遍历操作2.5 string类对象的修改操作2.7 string类非成员函数2.8 模拟实现string 一、为什么…

部署私有KMS服务器,并设置自动激活Windows和office

介绍 vlmcsd是一个KMS激活服务器的模拟器&#xff0c;可以在Windows Server之外的平台上部署自己的KMS服务器。它是一个开源项目&#xff0c;由Wind4开发&#xff0c;目前在Linux上运行&#xff08;包括Android、FreeBSD、Solaris、Minix、Mac OS、iOS和Windows等&#xff09;…

浅浅探索Memcached

一、NoSQL介绍 NoSQL是对 Not Only SQL、非传统关系型数据库的统称。 NoSQL一词诞生于1998年&#xff0c;2009年这个词汇被再次提出指非关系型、分布式、不提供ACID的数据库设计模式。 随着互联网时代的到来&#xff0c;数据爆发式增长&#xff0c;数据库技术发展日新月异&a…

【Node.js从基础到高级运用】二、搭建开发环境

Node.js入门&#xff1a;搭建开发环境 在上一篇文章中&#xff0c;我们介绍了Node.js的基础概念。现在&#xff0c;我们将进入一个更实际的阶段——搭建Node.js的开发环境。这是每个Node.js开发者旅程中的第一步。接下来&#xff0c;我们将详细讨论如何安装Node.js和npm&#…

Gitlab CICD 下载artifacts文件并用allure打开,或bat文件打开

allure命令行打开aritfacts报告 首先下载allure.zip&#xff0c;并解压 配置环境变量 使用命令行打开allure文件夹 allure open 2024-03-11-14-54-40 2024-03-11-14-54-40 包含index.html Bat文件打开artifacts There are 2 html reports in the download artifacts.zip S…