当前位置: 首页 > news >正文

面试题-React(三):什么是JSX?它与常规JavaScript有什么不同?

在React的世界中,JSX是一项引人注目的技术,它允许开发者在JavaScript中嵌套类似HTML的标签,用于描述UI组件的结构。本篇博客将通过丰富的代码示例,深入探索JSX语法,解析其在React中的用法和优势。

一、JSX基础语法

在React项目中,你会经常看到类似HTML的代码块,这就是JSX。以下是一些常见的JSX语法示例:

  1. 基本元素:
const element = <h1>Hello, JSX!</h1>;
  1. 表达式插值:
const name = "Alice";
const element = <p>Hello, {name}!</p>;
  1. 条件渲染:
const isLoggedIn = true;
const element = isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;
  1. 列表渲染:
const items = ['Apple', 'Banana', 'Orange'];
const list = (<ul>{items.map(item => <li key={item}>{item}</li>)}</ul>
);
  1. 注释写法
{/* 这是注释 */}
  1. 书写规范
  • JSX的顶层只能有一个根元素,所以我们很多时候会在外层包裹一个div元素,如:
const root = (<div><h1>标题</h1><div>内容</div></div>
)
  • JSX中的标签可以是单标签,也可以是双标签,如果是单标签,必须以/>结尾;
const root = (<div><h1>标题</h1><br/><div>内容</div></div>
)

二、JSX插入不同类型的值

  1. number/string/array直接显示
const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]const root = (<div><p>{number}</p><p>{str}</p><p>{arr}</p></div>
)

  1. null/undefined/boolean会显示为空
const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]
const nul= null,
const und= undefined,
const bool= trueconst root = (<div><p>{number}</p><p>{str}</p><p>{arr}</p><p>{nul}</p><p>{und}</p><p>{bool}</p><p>结尾</p></div>
)

三、JSX与常规JavaScript的区别

1. 标签嵌套:

JSX允许在JavaScript中嵌套HTML标签,与常规JavaScript中操作DOM的方式相比,更加直观。

2. 插值表达式:

使用花括号{}将JavaScript表达式插入到JSX中,这使得动态渲染变得非常便捷。

3. 类名和属性命名:

在JSX中,使用className代替HTML中的class,使用htmlFor代替for,避免与JavaScript关键字冲突。

四、为何React使用JSX?

1. 可读性:

JSX语法类似HTML,使代码更易读、易懂,提高了开发团队的协作效率。

2. 简洁性:

JSX简化了创建React元素的过程,相比手动使用React.createElement,代码更加清晰简洁。

3. 静态类型检查:

配合静态类型检查工具(如TypeScript、Flow),JSX可以帮助开发者在编码时捕获类型错误。

4. 更自然的开发体验:

JSX让开发者可以在JavaScript中更自然地描述UI结构,类似于在HTML中编写代码。

相关文章:

面试题-React(三):什么是JSX?它与常规JavaScript有什么不同?

在React的世界中&#xff0c;JSX是一项引人注目的技术&#xff0c;它允许开发者在JavaScript中嵌套类似HTML的标签&#xff0c;用于描述UI组件的结构。本篇博客将通过丰富的代码示例&#xff0c;深入探索JSX语法&#xff0c;解析其在React中的用法和优势。 一、JSX基础语法 在…...

纯前端实现图片上传七牛云

首先安装下依赖&#xff1a; npm install qiniu-js crypto-js 然后封装一下 uploaderHelper.ts import * as qiniu from qiniu-js; // ts-ignore import CryptoJS from crypto-js// 请求接口上传图片 export function uploadFile(file: File) {const uptoken getToken(你的…...

win10+wsl2+Ubuntu20.2+Pycharm+WSL解释器

目的&#xff1a;创建一个ubuntu系统下的python解释器&#xff0c;作为win平台下的pycharm的解释器。 这样做的好处是可以直接在win系统里操作文件&#xff0c;相比于linux方便一点&#xff0c;而且也不用对wsl的子系统进行迁移。 一、安装前准备 1. 设置-Windows更新-window…...

EL与JSTL

目录 EL EL语法 EL运算符 JSTL JSTL标签分类 JSP脚本&#xff1a;代码结构混乱、脚本与HTML 混合易出错、代码不易维护。 EL表达式&#xff1a;优化程序代码&#xff0c;增加程序可读性。 EL EL语法 EL表达式 ${ EL 表达式 } EL操作符 操作符“ . ” 获取对象的属性&a…...

【Linux】动态库和静态库

动态库和静态库 软链接硬链接硬链接要注意 自定义实现一个静态库(.a)解决、使用方法静态库的内部加载过程 自定义实现一个动态库&#xff08;.so&#xff09;动态库加载过程 静态库和动态库的特点 软链接 命令:ln -s 源文件名 目标文件名 软链接是独立连接文件的&#xff0c;他…...

R语言:联合多指标的ROC曲线

# 加载数据和包rm(list=ls())library(pROC)library(ggplot2)setwd("C:/Users/syy/Desktop/MRI_lab/")data<- read.csv("test1.csv", header = T)data$Groups...

将一个树形结构的数据平铺成一个一维数组(vue3)

一、需求描述 由于自带组件库没有具体完善,无法实现像element-ui这种可以多选选择任意一级的选项,也就是说,选择父级的时候不会联动选择子级的全部 例如: 所以,才会出现【二、案例场景】类似的场景,可以用来多选 ,并可以实现单选父级而不关联子级,选择了将树状数据进…...

OSCS开源安全周报第 56 期:Apache Airflow Spark Provider 任意文件读取漏洞

本周安全态势综述 OSCS 社区共收录安全漏洞 3 个&#xff0c;公开漏洞值得关注的是 Apache NiFi 连接 URL 验证绕过漏洞(CVE-2023-40037)、PowerJob 未授权访问漏洞(CVE-2023-36106)、Apache Airflow Spark Provider 任意文件读取漏洞(CVE-2023-40272)。 针对 NPM 、PyPI 仓库…...

CleanMyMac2024永久版Mac清理工具

Mac电脑作为相对封闭的一个系统&#xff0c;它会中毒吗&#xff1f;如果有一天Mac电脑产生了疑似中毒或者遭到恶意不知名攻击的现象&#xff0c;那又应该如何从容应对呢&#xff1f;这些问题都是小编使用Mac系统一段时间后产生的疑惑&#xff0c;通过一番搜索研究&#xff0c;小…...

软考高级系统架构设计师(一)计算机硬件

【原文链接】软考高级系统架构设计师&#xff08;一&#xff09;计算机硬件 1.1 计算机硬件组成 1.1.1 计算机的基本硬件组成 运算器控制器存储器输入设备输出设备 1.1.2 中央处理单元&#xff08;CPU&#xff09; 中央处理单元&#xff08;CPU&#xff09;的组成 运算器…...

bat文件中自定义cmd命令;执行完退出命令提示符窗口

1. bat中启动cmd命令 start cmd /k " cmd中命令行里自定义的命令 " 2.编写规则 start cmd /k "命令1 & 命令2 & 命令3" (无论前面命令是否成功, 后面都会执行start cmd /k "命令1 && 命令2 && 命令3 " (仅…...

深度学习的经典算法的论文、解读和代码实现

文章目录 CNN网络的经典算法LeNet-5AlexNetVGGInceptionInception-v1(GoogLeNet)BN-Inception ResNetR-CNNR-CNNFast R-CNNFaster R-CNN YOLOYOLO v1YOLO v2YOLO v3YOLO v4 RNN的经典算法RNNGRULSTMEncoder-DecoderAttentionTransformer CNN网络的经典算法 LeNet-5 来源论文&…...

开源TTS+gtx1080+cuda11.7+conda+python3.9吊打百度TTS

一、简介 开源项目&#xff0c;文本提示的生成音频模型 https://github.com/suno-ai/bark Bark是由Suno创建的基于变换器的文本到音频模型。Bark可以生成极为逼真的多语种演讲以及其他音频 - 包括音乐、背景噪音和简单的声音效果。该模型还可以产生非言语沟通&#xff0c;如…...

【私有GPT】CHATGLM-6B部署教程

【私有GPT】CHATGLM-6B部署教程 CHATGLM-6B是什么&#xff1f; ChatGLM-6B是清华大学知识工程和数据挖掘小组&#xff08;Knowledge Engineering Group (KEG) & Data Mining at Tsinghua University&#xff09;发布的一个开源的对话机器人。根据官方介绍&#xff0c;这是…...

基于“R语言+遥感“水环境综合评价方法教程

详情点击链接&#xff1a;基于"R语言遥感"水环境综合评价方法教程 一&#xff1a;R语言 1.1 R语言特点&#xff08;R语言&#xff09; 1.2 安装R&#xff08;R语言&#xff09; 1.3 安装RStudio&#xff08;R语言&#xff09; &#xff08;1&#xff09;下载地址…...

To_Heart—题解——P6234 [eJOI2019] T形覆盖

link. 突然很想写这篇题解。虽然题目不算难。 考场只有30分是为什么呢&#xff1f;看来是我没有完全理解这道题目吧&#xff01; 首先很明显的转换是&#xff0c;把 T 型覆盖看成十字形&#xff0c;再考虑最后减去某一块的贡献。 然后然后直接往原图上面放十字形!对于每一个…...

[软件工具]精灵标注助手目标检测数据集格式转VOC或者yolo

有时候我们拿到一个数据集发现是xml文件格式如下&#xff1a; <?xml version"1.0" ?> <doc><path>C:\Users\Administrator\Desktop\test\000000000074.jpg</path><outputs><object><item><name>dog</name>…...

Spring BeanName自动生成原理

先看代码演示 项目先定义一个User类 public class User {private String name;Overridepublic String toString() {return "User{" "name" name \ };}public String getName() {return name;}public void setName(String name) {this.name name;} }…...

论文阅读_图形图像_U-NET

name_en: U-Net: Convolutional Networks for Biomedical Image Segmentation name_ch: U-Net&#xff1a;用于生物医学图像分割的卷积网络 addr: http://link.springer.com/10.1007/978-3-319-24574-4_28 doi: 10.1007/978-3-319-24574-4_28 date_read: 2023-02-08 date_publi…...

基于热交换算法优化的BP神经网络(预测应用) - 附代码

基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于热交换算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.热交换优化BP神经网络2.1 BP神经网络参数设置2.2 热交换算法应用 4.测试结果&#xff1a;5.Matlab代…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...