【React】深入理解 JSX语法

news/2024/11/14 10:17:40/

鑫宝Code

🌈个人主页: 鑫宝Code
🔥热门专栏: 闲话杂谈| 炫酷HTML | JavaScript基础
💫个人格言: "如无必要,勿增实体"


文章目录

  • 深入理解 JSX语法
    • 1. JSX 简介
    • 2. JSX 的基本语法
      • 2.1 基本结构
      • 2.2 与普通 JavaScript 的区别
    • 3. JSX 的特性和规则
      • 3.1 表达式嵌入
      • 3.2 属性定义
      • 3.3 子元素规则
    • 4. JSX 与 JavaScript 的主要区别
      • 4.1 语法层面的区别
      • 4.2 编译过程
    • 5. JSX 的优势
      • 5.1 可读性更强
      • 5.2 开发效率更高
      • 5.3 安全性更好
    • 6. JSX 的最佳实践
      • 6.1 条件渲染
      • 6.2 列表渲染
      • 6.3 组件组合
    • 7. 总结

深入理解 JSX语法

在这里插入图片描述

1. JSX 简介

JSX (JavaScript XML) 是 React 框架中的一种特殊语法扩展,它允许我们在 JavaScript 代码中编写类似 HTML 的代码。JSX 为我们提供了一种直观的方式来描述用户界面的结构,同时保持了 JavaScript 的全部功能。

2. JSX 的基本语法

2.1 基本结构

JSX 的基本写法如下:

const element = (<div className="greeting"><h1>你好,世界!</h1></div>
);

2.2 与普通 JavaScript 的区别

传统 JavaScript 中,如果要创建相同的结构,需要这样写:

const element = React.createElement('div',{className: 'greeting'},React.createElement('h1', null, '你好,世界!')
);

3. JSX 的特性和规则

在这里插入图片描述

3.1 表达式嵌入

JSX 允许使用花括号 {} 嵌入任何有效的 JavaScript 表达式:

const name = '小明';
const element = <h1>你好,{name}</h1>;const sum = (a, b) => a + b;
const element2 = <div>1 + 2 = {sum(1, 2)}</div>;

3.2 属性定义

JSX 中的属性使用驼峰命名法:

// JSX
const element = <div className="container" onClick={handleClick}></div>;// 普通 HTML
// <div class="container" οnclick="handleClick()"></div>

3.3 子元素规则

JSX 标签可以包含子元素:

const element = (<div><h1>标题</h1><p>段落</p></div>
);

4. JSX 与 JavaScript 的主要区别

在这里插入图片描述

4.1 语法层面的区别

  1. 标签语法

    • JSX 允许直接在 JavaScript 代码中使用 XML/HTML 标签
    • 普通 JavaScript 需要使用字符串或 DOM API 创建元素
  2. 属性命名

    • JSX 使用驼峰命名法(如 className、onClick)
    • HTML 使用短横线命名法(如 class、onclick)
  3. 表达式处理

    • JSX 使用花括号 {} 插入表达式
    • JavaScript 使用字符串拼接或模板字符串

4.2 编译过程

JSX 代码最终会被编译成普通的 JavaScript 代码:

// JSX 代码
const element = (<div id="app"><h1>{title}</h1></div>
);// 编译后的 JavaScript 代码
const element = React.createElement('div',{ id: 'app' },React.createElement('h1', null, title)
);

5. JSX 的优势

5.1 可读性更强

JSX 的声明式语法使代码结构更清晰,更容易理解组件的层级关系。

5.2 开发效率更高

  • 支持编辑器的语法高亮
  • 提供完整的类型检查
  • 编译时可以发现潜在错误

5.3 安全性更好

JSX 会自动转义内容,防止 XSS 攻击:

const userInput = '<script>alert("危险代码")</script>';
const element = <div>{userInput}</div>;
// 输出时会被转义,而不是执行脚本

6. JSX 的最佳实践

6.1 条件渲染

function Greeting({ isLoggedIn }) {return (<div>{isLoggedIn ? (<h1>欢迎回来!</h1>) : (<h1>请登录</h1>)}</div>);
}

6.2 列表渲染

function ItemList({ items }) {return (<ul>{items.map(item => (<li key={item.id}>{item.name}</li>))}</ul>);
}

6.3 组件组合

function App() {return (<div><Header /><MainContent><Sidebar /><Content /></MainContent><Footer /></div>);
}

7. 总结

JSX 是 React 生态系统中的一个重要创新,它成功地将声明式的 UI 描述与 JavaScript 的编程能力结合在一起。虽然它看起来像模板语言,但实际上它具备了完整的 JavaScript 功能。通过 JSX,我们可以:

  1. 更直观地描述 UI 结构
  2. 在视图中直接使用 JavaScript 的全部特性
  3. 获得更好的开发体验和工具支持
  4. 提高代码的可维护性和重用性

理解 JSX 及其与普通 JavaScript 的区别,对于掌握 React 开发至关重要。它不仅是一种语法糖,更是一种强大的编程范式,能够帮助我们构建更好的用户界面。

End


http://www.ppmy.cn/news/1546398.html

相关文章

Hive 查询各类型专利 top10 申请人及专利申请数

Hive 查询各类型专利 top10 申请人及专利申请数 一、背景 在专利数据处理中&#xff0c;我们常常需要分析不同类型专利下申请人的活跃度。例如&#xff0c;给定一个专利明细表 t_patent_detail&#xff0c;其中包含专利号、专利名称、专利类型、申请时间、授权时间和申请人等…

昇思大模型平台打卡体验活动:项目5基于MindSpore实现Transformer机器翻译

首先仍然是先登录大模型体验平台 https://xihe.mindspore.cn/my/clouddev 启动&#xff01;&#xff01; 进入环境之后&#xff0c;即可开始运行notebook&#xff0c; Transformer 模型与实现 Transformer 是一种由 Vaswani 等人在 2017 年提出的神经网络结构&#xff08;论文…

parallelStream()使用注意点

parallelStream()使用中的注意点&#xff1a; 1、并行流如果使用&#xff0c;最好使用自定义的线程池&#xff0c;避免使用默认的线程池&#xff0c;以免千万阻塞或者资源竞争等问题。 2、parallelStream适用的场景是CPU密集型的&#xff0c;假如本身电脑CPU的负载很大&#…

Maven最佳实践

文章目录 1.摘要 本文主要介绍Maven使用&#xff0c;作为Maven使用手册来记录。 2.介绍 Maven是项目管理工具&#xff0c;将项目开发和管理过程抽象成一个项目对象模型&#xff0c;使用pom.xml 文件进行依赖管理和项目构建。 Maven 中pom.xml 是根据坐标信息来定位资源的位置&a…

什么是网络安全CTF有何意义?该如何入门?

什么是网络安全CTF?有何意义 &#xff1f;该如何入门 &#xff1f; 什么是网络安全CTF? CTF在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式。它起源于1996年DEFCON&#xff0c;以代替之前通过互相发起真实攻击进行技术比拼的方式。发展至今&#xff…

11.11机器学习_介绍和定义

一、 机器学习介绍与定义 1. 机器学习定义 机器学习&#xff08;Machine Learning&#xff09;本质上就是让计算机自己在数据中学习规律&#xff0c;并根据所得到的规律对未来数据进行预测。 机器学习包括如聚类、分类、决策树、贝叶斯、神经网络、深度学习&#xff08;Deep…

单体架构 IM 系统之长轮询方案设计

在上一篇技术短文&#xff08;单体架构 IM 系统之核心业务功能实现&#xff09;中&#xff0c;我们讨论了 “信箱模型” 在单体架构 IM 系统中的应用&#xff0c;“信箱模型” 见下图。 客户端 A 将 “信件” 投入到客户端 B 的 “信箱” 中&#xff0c;然后客户端 B 去自己的 …

链表循环及差集相关算法题|判断循环双链表是否对称|两循环单链表合并成循环链表|使双向循环链表有序|单循环链表改双向循环链表|两链表的差集(C)

判断循环双链表是否对称 设计一个算法用于判断带头节点的循环双链表是否对称 算法思想 让left从左向右扫描&#xff0c;right从右向左扫描&#xff0c;直到它们指向同一个节点&#xff1a;left right 或相邻left->next right&#xff0c;或right->prev left&#x…