React JSX 语法

JSX（JavaScript XML）是一种 JavaScript 语法扩展，常用于 React 开发中。它允许你在 JavaScript 中编写类似 HTML 的代码，直观且简洁。尽管 JSX 看起来像 HTML，但它实际上是 JavaScript 对象。JSX 是 React 的核心特点之一，它让用户界面构建更加声明式和直观。

1. 基本 JSX 语法

JSX 的基本格式就是将 HTML-like 语法嵌入到 JavaScript 中，示例：

const element = <h1>Hello, world!</h1>;

在这个例子中，<h1>Hello, world!</h1> 是 JSX，它会被转换为 JavaScript 函数调用。React 会通过这些函数调用来创建和更新 DOM。

2. JSX 转换原理

JSX 语法不会直接在浏览器中执行，它会被编译成普通的 JavaScript 代码。比如，下面的 JSX 代码：

const element = <h1>Hello, world!</h1>;

实际上会被编译成：

const element = React.createElement('h1', null, 'Hello, world!');

React.createElement() 函数会返回一个 JavaScript 对象，表示这个元素。React 使用这些对象来有效地更新和渲染用户界面。

3. 嵌入表达式

JSX 中可以嵌入 JavaScript 表达式，使用 {} 包裹，例如：

const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;

这里，{name} 是 JavaScript 表达式，会输出 "Hello, Alice!"。

4. JSX 必须有一个根元素

JSX 只能返回一个单一的根元素。比如，以下代码会报错：

return (
  <h1>Hello</h1>
  <h2>World</h2>
);

必须将它们包裹在一个父元素中，如 <div> 或者 <>（React Fragment）：

return (
  <div>
    <h1>Hello</h1>
    <h2>World</h2>
  </div>
);

或：

return (
  <>
    <h1>Hello</h1>
    <h2>World</h2>
  </>
);

5. 属性（Props）使用驼峰命名

在 JSX 中，HTML 属性会使用驼峰式命名，而不是标准的 HTML 属性名。例如：

• class -> className
• for -> htmlFor

示例：

const element = <div className="container"></div>;

6. 条件渲染

可以在 JSX 中使用三元表达式或条件运算符来动态显示内容。

6.1. 三元表达式：

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>;

6.2. 与运算符 (&&)：

const unreadMessages = ['Message 1', 'Message 2'];
return (
  <div>
    <h1>Hello!</h1>
    {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}
  </div>
);

7. 样式和类名

7.1. 行内样式

在 JSX 中，行内样式需要使用驼峰命名，并以对象的形式传入：

const divStyle = {
  color: 'blue',
  backgroundColor: 'lightgray'
};

const element = <div style={divStyle}>Styled Text</div>;

7.2. 类名

使用 className 而不是 class，因为 class 是 JavaScript 保留字：

const element = <div className="my-class">Hello World</div>;

8. JSX 防止注入攻击

JSX 默认防止注入攻击，因为 React 会自动对嵌入的所有内容进行转义。无论你在 JSX 中插入什么，都会被转义成字符串，从而防止恶意代码执行。

const userInput = '<script>alert("Hacked!")</script>';
const element = <div>{userInput}</div>;  // 输出文本而不会执行脚本

在这个例子中，<script> 标签会被当作纯文本渲染，而不是执行。

9. React.Fragment

为了避免在 DOM 中引入多余的元素，有时不想用 <div> 包裹多个元素，React 提供了 React.Fragment 或缩写 <> </> 语法：

return (
  <>
    <h1>Hello</h1>
    <h2>World</h2>
  </>
);

10. JSX 的局限性

• JSX 中不能直接使用 if 语句，需要使用三元运算符或 && 进行条件判断。
• 必须返回单一的根元素（可以使用 React.Fragment）。

11. 总结

JSX 是 React 中的核心特性，它通过更接近 HTML 的语法来提高代码的可读性和直观性。尽管它看起来像是 HTML，但本质上它是 JavaScript 表达式，并且会在编译时转换成 React 的函数调用，帮助 React 高效地更新和管理 DOM。