JSX语法基础

什么是JSX？

JSX（JavaScript XML）是一种JavaScript的语法扩展，允许我们在JavaScript代码中编写类似HTML的标记。它是React的核心特性之一，用于描述UI的结构。虽然JSX看起来像HTML，但它实际上是JavaScript的一部分，最终会被编译为普通的JavaScript代码。

备注

JSX不是HTML，也不是字符串。它是一种语法糖，用于简化React组件的编写。

为什么使用JSX？

在React中，JSX的主要作用是让开发者能够以更直观的方式描述UI。相比于直接使用JavaScript创建DOM元素，JSX的语法更接近HTML，使得代码更易读、更易维护。

例如，以下是用纯JavaScript创建DOM元素的代码：

javascript
const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');

而使用JSX，可以写成：

jsx
const element = <h1 className="greeting">Hello, world!</h1>;

显然，JSX的写法更加简洁和直观。

JSX的基本语法

1. 嵌入表达式

在JSX中，你可以使用大括号 {} 嵌入任何有效的JavaScript表达式。例如：

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

在这个例子中，{name} 会被替换为 React，最终渲染结果为 <h1>Hello, React!</h1>。

2. 属性

JSX中的属性与HTML类似，但有一些区别。例如，HTML中的 class 在JSX中要写成 className，因为 class 是JavaScript的保留字。

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

3. 自闭合标签

在JSX中，标签必须正确闭合。对于没有内容的标签，可以使用自闭合语法：

jsx
const element = <img src="image.png" alt="An image" />;

4. 多行JSX

当JSX代码较长时，可以使用括号 () 将代码包裹起来，以保持代码的可读性：

jsx
const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </div>
);

JSX的实际应用

1. 条件渲染

在React中，你可以使用JSX结合JavaScript的条件语句来实现条件渲染。例如：

jsx
const isLoggedIn = true;

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

2. 列表渲染

你可以使用 map 函数来渲染列表。例如：

jsx
const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

const element = <ul>{listItems}</ul>;

警告

在渲染列表时，务必为每个列表项提供一个唯一的 key 属性，以帮助React识别哪些项发生了变化。

JSX的编译过程

JSX最终会被编译为 React.createElement 函数调用。例如，以下JSX代码：

jsx
const element = <h1 className="greeting">Hello, world!</h1>;

会被编译为：

javascript
const element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');

提示

你可以使用 Babel 在线工具来查看JSX是如何被编译为JavaScript的。

总结

JSX是React中用于描述UI的强大工具。它允许我们在JavaScript中编写类似HTML的代码，使得UI的构建更加直观和高效。通过嵌入表达式、使用属性、条件渲染和列表渲染等特性，JSX为React开发提供了极大的灵活性。

附加资源

练习

编写一个React组件，使用JSX渲染一个包含标题和段落的简单页面。
尝试使用条件渲染，根据用户是否登录显示不同的欢迎信息。
使用 map 函数渲染一个包含5个列表项的列表。

通过这些练习，你将更好地掌握JSX的基础知识，并为后续的React学习打下坚实的基础。

什么是JSX？​

为什么使用JSX？​

JSX的基本语法​

1. 嵌入表达式​

2. 属性​

3. 自闭合标签​

4. 多行JSX​

JSX的实际应用​

1. 条件渲染​

2. 列表渲染​

JSX的编译过程​

总结​

附加资源​

练习​