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博客 上面讲的序…...
Pixelorama扩展深度解析:3种自动化精灵图切割方案对比
Pixelorama扩展深度解析:3种自动化精灵图切割方案对比 【免费下载链接】Pixelorama A free & open-source 2D sprite editor, made with the Godot Engine! Available on Windows, Linux, macOS and the Web! 项目地址: https://gitcode.com/gh_mirrors/pi/Pi…...
告别繁琐配置:用快马一键生成wsl2环境初始化脚本
告别繁琐配置:用快马一键生成wsl2环境初始化脚本 最近在帮团队新成员配置开发环境时,发现每次手动搭建wsl2都要重复查找各种命令和配置步骤,效率实在太低。于是尝试用InsCode(快马)平台生成了一套自动化脚本,效果出乎意料地好。 …...
5分钟玩转OpenClaw:nanobot镜像云端体验与本地调试对比
5分钟玩转OpenClaw:nanobot镜像云端体验与本地调试对比 1. 为什么需要对比云端与本地两种体验方式 作为一个长期折腾AI工具的开发者,我最近在测试OpenClaw时遇到了一个典型困境:是直接在本地电脑安装全套环境,还是先用云端沙盒快…...
计算机毕业设计springboot校园外卖系统 基于Spring Boot的高校餐饮配送服务平台 Spring Boot框架下的校园在线订餐与配送管理系统
计算机毕业设计springboot校园外卖系统n322b9 (配套有源码 程序 mysql数据库 论文) 本套源码可以在文本联xi,先看具体系统功能演示视频领取,可分享源码参考。随着互联网技术的日益成熟和普及,网络已经深度融入人们的日常生活&…...
如何快速配置HomeAssistant格力空调本地控制组件:完整操作指南
如何快速配置HomeAssistant格力空调本地控制组件:完整操作指南 【免费下载链接】HomeAssistant-GreeClimateComponent Custom Gree climate component written in Python3 for Home Assistant. Controls ACs supporting the Gree protocol. 项目地址: https://git…...
UndertaleModTool:解锁游戏修改的无限可能
UndertaleModTool:解锁游戏修改的无限可能 【免费下载链接】UndertaleModTool The most complete tool for modding, decompiling and unpacking Undertale (and other Game Maker: Studio games!) 项目地址: https://gitcode.com/gh_mirrors/un/UndertaleModTool…...
告别丑陋代码块!用PyQt5+pygments实现Word代码高亮粘贴(附完整源码)
告别丑陋代码块!用PyQt5pygments实现Word代码高亮粘贴(附完整源码) 在技术文档编写过程中,代码展示是不可或缺的部分。然而,直接将IDE中的代码复制到Word文档时,往往会丢失原有的高亮和格式,变成…...
微软研究院:让AI在现实世界中越用越聪明的“在线体验学习法“
这项由微软研究院团队完成的研究发表于2026年3月的arXiv预印本数据库,论文编号为arXiv:2603.16856v1。有兴趣深入了解的读者可以通过该编号查询完整论文。这项研究被称为"体验学习系列"的第二部分,第一部分专注于"在线策略情境蒸馏"…...
Python实战:5分钟搞定分数傅里叶变换(FRFT)的数值计算与可视化
Python实战:5分钟搞定分数傅里叶变换(FRFT)的数值计算与可视化 在信号处理领域,傅里叶变换早已成为工程师们的标准工具,但你是否想过,在时域和频域之间还存在无数个"中间态"?这就是分…...
从零开始掌握30+种路径规划算法:可视化学习与实战指南
从零开始掌握30种路径规划算法:可视化学习与实战指南 【免费下载链接】PathPlanning Common used path planning algorithms with animations. 项目地址: https://gitcode.com/gh_mirrors/pa/PathPlanning 你是一个文章写手,你负责为开源项目写专…...
