JSX 语法揭秘：HTML 与 JavaScript 的完美结合-平芜编程栈

1. 什么是 JSX？

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的结构。虽然它看起来像 HTML，但 JSX 在编译时会被转换为普通的 JavaScript 函数调用（通常是React.createElement()）。

JSX 的核心思想是将 UI 的表示逻辑和渲染逻辑通过声明式的方式结合在一起，而不是将它们分离到不同的文件中。这种“关注点分离”的新思路，让组件成为了 UI 的独立、可复用的单元。

2. JSX 的基本语法

2.1 嵌入表达式

在 JSX 中，你可以通过花括号{}嵌入任何有效的 JavaScript 表达式。

const name = 'React'; const element = <h1>Hello, {name}!</h1>; // 也可以调用函数 function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'John', lastName: 'Doe' }; const element2 = <h1>Hello, {formatName(user)}!</h1>;

2.2 指定属性

你可以使用引号来将属性值指定为字符串字面量，也可以使用花括号在属性值中插入一个 JavaScript 表达式。

// 字符串字面量 const element1 = <div tabIndex="0"></div>; // JavaScript 表达式 const element2 = <img src={user.avatarUrl} />; // 注意：由于 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。 // 例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。 const element3 = <div className="container" tabIndex={-1}></div>;

2.3 子元素

如果一个标签里面没有内容，你可以使用/>来闭合标签，就像 XML/HTML 一样。JSX 标签里能够包含很多子元素。

const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> );

3. JSX 防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（跨站脚本）攻击。

const title = response.potentiallyMaliciousInput; // 这是一个安全的内容，会被转义 const element = <h1>{title}</h1>;

4. JSX 表示对象

Babel 会把 JSX 转译成一个名为React.createElement()的函数调用。以下两种示例代码完全等效：

// JSX 写法 const element = ( <h1 className="greeting"> Hello, world! </h1> ); // 编译后的 React.createElement() 调用 const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

React.createElement()会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象（简化结构）：

// 注意：这是简化过的结构 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } };

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

5. 在 JSX 中使用条件渲染和循环

5.1 条件渲染

JSX 中不能直接使用if语句，但可以使用三元运算符、逻辑与 (&&) 运算符，或者在 JSX 外部使用if语句。

function Greeting(props) { const isLoggedIn = props.isLoggedIn; // 方法1：三元运算符 return ( <div> {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} </div> ); } // 方法2：逻辑与运算符 (用于当条件为 true 时渲染) function Mailbox(props) { const unreadMessages = props.unreadMessages; return ( <div> <h1>Hello!</h1> {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div> ); }

5.2 循环渲染列表

使用 JavaScript 的map()函数来遍历数组并生成元素列表。

function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // key 帮助 React 识别哪些元素改变了，是必须的 <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } // 使用组件 const numbers = [1, 2, 3, 4, 5]; const element = <NumberList numbers={numbers} />;

6. 总结

JSX 是 React 的核心特性之一，它通过将 HTML 结构与 JavaScript 逻辑紧密结合，提供了一种声明式、直观的 UI 构建方式。它并不是模板语言，而是 JavaScript 的语法扩展，最终会被编译成普通的 JavaScript 对象（React 元素）。掌握 JSX 是学习现代前端框架（如 React）的重要一步。

记住 JSX 的几个关键点：