react的基础使用
react中为什么使用jsx
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。
react认为将业务代码和数据以及事件等等 需要和UI高度耦合。所以采用了jsx。什么是jsx
jsx是javascript的语法扩展,类似模板写法格式(类似模板引擎)
JSX是一种JavaScript的语法扩展,首先运用于React中,其格式比较像是模版语言
特点:
React认为渲染逻辑本质上与其他UI逻辑内在耦合,比如,在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI,以及需要在UI中展示准备好的数据。 [4]
JSX可以使用引号来定义以字符串为值的属性:
const element =
;
也可以使用大括号来定义以JavaScript表达式为值的属性:
const element =
;
因为JSX的特性更接近JavaScript而不是HTML,所以React DOM使用camelCase(小驼峰)命名来定义属性的名称,而不是使用HTML的属性名称。例如:class变成了className,而tableindex则对应着tableIndex
需要注意: js+html 混合写法
属性命名:小驼峰
属性绑值:{} 直接赋值 ""
元素内容中写js代码:
<div>
{//代码
}
</div>
react组件中jsx写法格式:
function App() {let name = "小花";let cname = "active";return (<div className="App">测试<div className={cname}>{name}</div></div>);
}jsx可以防止注入攻击:
function App() {let name = "小花";let cname = "active";//注入脚本let str="<input src='www.***.com'/>";return (<div className="App">测试<div className={cname}>{name}</div><div>{str}</div></div>);
}
react中组件
函数组件
类组件
组件的书写格式遵循es5 es6函数组件:
function App() {//必带返回return <div className="App">测试</div>;
}let App = () => {return <div className="App">测试</div>;
};
在mainjs文件中引入app组件
该函数被执行 ,获取到的是编译之后的jsxDEV(‘div’,{className:’’})格式。
jsxDEV('div',{ className: "active" })
let ele=React.createElement("div", { className: "active" });
console.log(ele);类组件写法:
import React from "react";
console.log(React.Component);
//es6 class 继承 react component class类
class App extends React.Component {constructor(props) {super(props);//执行父类的构造}//渲染函数render() {return <div>测试</div>;}
}export default App;
export default App;函数组件和类组件的使用场景
函数组件主要用于UI界面的渲染 react 16.8以前
16.8版本之后react hooks API 函数可以写业务逻辑了。
类组件主要做复杂的业务逻辑的。
相关文章:
react的基础使用
react中为什么使用jsxReact 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如,在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI,以及需要在 UI 中展示准备好的数据。react认为将业务代码和数据以及事件等等 需要和UI高度耦合…...
letcode 4.寻找两个正序数组的中位数(官方题解笔记)
题目描述 给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 1.二分查找 1.1思路 时间复杂度:O(log(mn)) 空间复杂度:O(1) 给定…...
【面试题系列】K8S常见面试题
目录 序言 问题 1. 简单说一下k8s集群内外网络如何互通的吧 2.描述一下pod的创建过程 3. 描述一下k8s pod的终止过程 4.Kubernetes 中的自动伸缩有哪些方式? 5.Kubernetes 中的故障检测有哪些方式? 6.Kubernetes 中的资源调度有哪些方式ÿ…...
字符函数和字符串函数(上)-C语言详解
CSDN的各位友友们你们好,今天千泽为大家带来的是C语言中字符函数和字符串函数的详解,掌握了这些内容能够让我们更加灵活的运用字符串,接下来让我们一起走进今天的内容吧!写这篇文章需要在cplusplus.com上大量截图,十分不易!如果对您有帮助的话希望能够得到您的支持和帮助,我会持…...
全连接神经网络
目录 1.全连接神经网络简介 2.MLP分类模型 2.1 数据准备与探索 2.2 搭建网络并可视化 2.3 使用未预处理的数据训练模型 2.4 使用预处理后的数据进行模型训练 3. MLP回归模型 3.1 数据准备 3.2 搭建回归预测网络 1.全连接神经网络简介 全连接神经网络(Multi-Layer Percep…...
深度学习目标检测ui界面-交通标志检测识别
深度学习目标检测ui界面-交通标志检测识别 为了将算法封装起来,博主尝试了实验pyqt5的上位机界面进行封装,其中遇到了一些坑举给大家避开。这里加载的训练模型参考之前写的博客: 自动驾驶目标检测项目实战(一)—基于深度学习框架yolov的交通…...
ubuntu不同版本的源(换源)(镜像源)(lsb_release -c命令,显示当前系统的发行版代号(Codename))
文章目录查看unbuntu版本名(lsb_release -c命令)各个版本源代号(仅供参考,具体代号用上面命令查)各版本软件源Ubuntu20.10阿里源:清华源:Ubuntu20.04阿里源:清华源:Ubunt…...
linux入门---程序翻译的过程
我们在vs编译器中写的代码按下ctrl f5就可以直接运行起来,并且会将运行的结果显示到显示器上,这里看上去只有一个步骤但实际上这里会存在很多的细节,比如说生成结果在这里插入代码片之前我们的代码会经过预处理,编译,汇…...
springboot复习(黑马)
学习目标基于SpringBoot框架的程序开发步骤熟练使用SpringBoot配置信息修改服务器配置基于SpringBoot的完成SSM整合项目开发一、SpringBoot简介1. 入门案例问题导入SpringMVC的HelloWord程序大家还记得吗?SpringBoot是由Pivotal团队提供的全新框架,其设计…...
C++指针详解
旧文更新:两三年的旧文了,一直放在电脑里,现在直接传上CSDN 一、指针的概念 1.1 指针 程序运行时每个变量都会有一块内存空间,变量的值就存放在这块空间中。程序可以通过变量名直接访问这块空间内的数据,这种访问方…...
tauri+vite+vue3开发环境下创建、启动运行和打包发布
目录 1.创建项目 2.安装依赖 3.启动项目 4.打包生成windows安装包 5.安装打包生成的安装包 1.创建项目 运行下面命令创建一个tauri项目 pnpm create tauri-app 我创建该项目时的node版本为16.15.0 兼容性注意 Vite 需要 Node.js 版本 14.18,16。然而&#x…...
安卓进阶系列-系统基础
文章目录计算机结构冯诺依曼结构哈弗结构冯诺依曼结构与哈弗结构对比安卓采用的架构安卓操作系统进程间通讯(IPC)内存共享linux内存共享安卓内存共享管道Unix Domain Socket同步常见同步机制信号量Mutex管程安卓同步机制安卓中的Mutex安卓中的ConditionB…...
10 Wifi网络的封装
概述 Wifi有多种工作模式,比如:STA模式、AccessPoint模式、Monitor模式、Ad-hoc模式、Mesh模式等。但在IPC设备上,主要使用STA和AccessPoint这两种模式。下面分别进行介绍。 STA模式:任何一种无线网卡都可以运行在此模式,这种模式也是无线网卡的默认模式。在此模式下,无线…...
手把手的教你安装PyCharm --Pycharm安装详细教程(一)(非常详细,非常实用)
简介 Jetbrains家族和Pycharm版本划分: pycharm是Jetbrains家族中的一个明星产品,Jetbrains开发了许多好用的编辑器,包括Java编辑器(IntelliJ IDEA)、JavaScript编辑器(WebStorm)、PHP编辑器&…...
开发板与ubantu文件传送
接下来的所以实验都通过下面这种方式发送APP文件到开发板运行 目录 1、在ubantu配置 ①在虚拟机上添加一个桥接模式的虚拟网卡 ②设定网卡 ③在网卡上配置静态地址 2、开发板设置 ①查看网卡 ②配置网卡静态ip 3、 测试 ①ping ②文件传送 传送报错情况 配置环境&#…...
如何成为一名优秀的网络安全工程师?
前言 这是我的建议如何成为网络安全工程师,你应该按照下面顺序学习。 简要说明 第一件事你应该学习如何编程,我建议首先学python,然后是java。 (非必须)接下来学习一些算法和数据结构是很有帮助的,它将…...
面试问题之高并发内存池项目
项目部分 1.这个项目是什么? 高并发内存池的原型是谷歌一个开源项目,tcmalloc,而这个项目,就是tcmalloc中最核心的框架和部分拿出来进行模拟。他的作用就是在去代替原型的内存分配函数malloc和free。这个项目涉及的技术有,c&…...
如果阿里巴巴给蒋凡“百亿补贴”
出品 | 何玺 排版 | 叶媛 2021底,阿里内部进行组织架构大调整,任命蒋凡为阿里海外商业负责人,分管全球速卖通和国际贸易(ICBU)两个海外业务,以及Lazada等面向海外市场的多家子公司。 一年时间过去&#x…...
Linux版本现状
Linux的发行版本可以大体分为两类,一类是商业公司维护的发行版本,一类是社区组织维护的发行版本,前者以著名的Red Hat(RHEL红帽)为代表,后者以Debian为代表。Red HatRedhat,应该称为Redhat系列&…...
Winform中实现保存配置到文件/项目启动时从文件中读取配置(序列化与反序列化对象)
场景 Winform中实现序列化指定类型的对象到指定的Xml文件和从指定的Xml文件中反序列化指定类型的对象: Winform中实现序列化指定类型的对象到指定的Xml文件和从指定的Xml文件中反序列化指定类型的对象_winform xml序列化_霸道流氓气质的博客-CSDN博客 上面讲的序…...
软电话通话30秒自动挂断?一文讲透FreeSWITCH通话超时问题
当你满怀期待地搭建好FreeSWITCH,用两个软电话成功呼叫,却发现通话总是在30秒左右莫名其妙地中断——别急,这是SIP新手最常遇到的“经典Bug”。本文将为你抽丝剥茧,彻底解决这个问题,并附带其他可能引发通话异常中断的…...
专业级视频对比分析工具:video-compare的技术架构深度解析
专业级视频对比分析工具:video-compare的技术架构深度解析 【免费下载链接】video-compare Split screen video comparison tool using FFmpeg and SDL2 项目地址: https://gitcode.com/gh_mirrors/vi/video-compare 在视频编码质量评估、算法效果验证和媒体…...
嵌入式系统常用轻量级校验算法解析
单片机中常用的轻量级校验算法 1. 校验算法概述 在嵌入式系统开发中,数据校验是确保通信可靠性和数据完整性的关键技术手段。无论是UART通信中的奇偶校验、CAN总线中的CRC校验,还是Modbus、MAVlink、USB等协议中的校验机制,都体现了校验算法…...
前开发转行AI萨满:给大模型驱魔收费百万
在人工智能的狂潮中,一个看似荒诞的职业正在硅谷悄然兴起——AI萨满。他们不是巫师,而是精通软件测试的前开发者,用测试思维为大型语言模型“驱魔”,收费高达百万。本文将从软件测试的专业视角,揭秘这一转型背后的逻辑…...
[小红书AI自动化教程]凌晨2点我在睡觉,AI偷偷发了篇小红书爆款:醒来99+点赞,人类社媒苦役终结?
我把小红书交给 OpenClaw,它开始自己干活了 凌晨两点,我在睡觉,它却偷偷发了一篇爆款。 醒来点赞99,评论全是“姐妹求链接”。这不是科幻。去年我还为追热点熬夜秃头,如今一句“今天发什么”,AI 就能完成选…...
别再傻傻分不清了!用例图中的‘包含’和‘扩展’关系,用这个外卖点餐例子一下就懂了
外卖点餐中的UML用例图:用"包含"和"扩展"关系拆解用户旅程 每次打开外卖App时,那些看似简单的点击操作背后,其实隐藏着精密的系统设计逻辑。对于刚接触UML的开发者来说,理解用例图中的"包含"&#…...
智能电商客服中台系统实战:高并发场景下的架构设计与性能优化
背景痛点:大促下的客服系统之困 每年双十一、618这类电商大促,对技术团队来说都是一场“大考”。作为直接面对海量用户的客服系统,更是压力山大。我经历过几次大促保障,发现客服系统在峰值流量下,通常会暴露出几个典型…...
探索CLIP-ViT-H-14:5大突破重新定义多模态AI应用
探索CLIP-ViT-H-14:5大突破重新定义多模态AI应用 【免费下载链接】CLIP-ViT-H-14-laion2B-s32B-b79K 项目地址: https://ai.gitcode.com/hf_mirrors/laion/CLIP-ViT-H-14-laion2B-s32B-b79K 你是否想过让计算机像人类一样同时理解图像和文字?CLI…...
信创云渲染能支持远程设计与异地协同吗?
在信创推进深化的当下,企业对远程设计、异地协同的需求愈发迫切,传统本地工作站既难以适配国产软硬件环境,也无法满足跨地域高效协作需求。信创云渲染作为核心解决方案,能否同时支撑远程设计与异地协同?答案是肯定的&a…...
新手入门实战:基于 Spring Boot 的计算机毕设题目推荐管理系统设计与实现
对于计算机专业的同学来说,毕业设计(毕设)是大学学习成果的一次重要检验。然而,选题环节往往令人头疼:题目来源分散、重复率高、与个人兴趣或能力不匹配,缺乏一个集中的平台进行管理和推荐。今天࿰…...
