7 JSX 语法基础

在前一篇中，我们介绍了 React 应用的基本文件结构。在这篇文章中，我们将深入了解 JSX，这是 React 中一个非常重要且独特的概念。理解 JSX 是掌握 React 的关键之一，因为它简化了在 JavaScript 代码中编写 HTML 结构的方式。

什么是 JSX？

JSX 是 JavaScript XML 的缩写，它允许我们在 JavaScript 代码中编写类似 HTML 的语法。虽然你可以使用传统的 JavaScript 来创建 React 元素，但 JSX 使得创建组件的过程更加直观和方便。

使用 JSX，你可以将组件结构直接嵌入到 JavaScript 代码中，这使得组件的视觉结构和逻辑定义更为紧密。

示例

以下是一个简单的 JSX 示例：

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

在这个例子中，我们创建了一个 React 元素 element，它是一个包含 “Hello, world!” 的 h1 标题。

JSX 语法规则

尽管 JSX 看起来类似于 HTML，但有一些需要遵循的规则：

1. 单根节点：每个 JSX 元素必须有一个单一的根节点。例如，如果你需要返回多个元素，可以将它们包裹在一个 div 元素中，或者使用 React Fragment。

   const element = (
     <div>
       <h1>Hello, world!</h1>
       <p>欢迎使用 React!</p>
     </div>
   );

   或者使用 React Fragment：

   const element = (
     <>
       <h1>Hello, world!</h1>
       <p>欢迎使用 React!</p>
     </>
   );

2. 属性：JSX 中的属性使用 camelCase 语法，而不是 HTML 中的常规小写。例如，使用 className 而不是 class。

   const element = <div className="my-class">内容</div>;

3. 表达式：你可以在 JSX 中使用 JavaScript 表达式，只需要将其放在花括号 {} 中。这使得内容的动态渲染变得十分容易。

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

如何编译 JSX？

虽然我们在 JavaScript 代码中使用 JSX，浏览器并不能直接理解这些语法。为了使其可运行，JSX 被转译为 React.createElement() 调用。例如：

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

经过编译后，变成了：

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

为了使用 JSX，我们通常会借助像 Babel 这样的工具，它可以在构建过程中自动将 JSX 转换为 JavaScript。

嵌套与条件渲染

嵌套 JSX

在 JSX 中，你可以嵌套其他 JSX 元素。React 允许我们将组件嵌套，实现更加复杂的 UI。

const App = () => (
  <div>
    <h1>欢迎</h1>
    <p>这是一个使用 JSX 的示例。</p>
  </div>
);

条件渲染

我们还可以在 JSX 中进行条件渲染，这通过 JavaScript 表达式实现：

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>欢迎回来!</h1> : <h1>请登录.</h1>}
  </div>
);

在上面的例子中，当 isLoggedIn 为 true 时，渲染 “欢迎回来!”，否则渲染 “请登录.”。

总结

在本篇中，我们了解了 JSX 是什么以及如何在 React 中使用它。我们讨论了 JSX 的基本语法规则，包括如何创建元素、使用属性和嵌套结构。通过示例，我们展示了如何通过 JSX 渲染动态内容。

理解 JSX 是学习 React 的基础，而下一篇中我们将探讨另一个核心概念——虚拟 DOM。继续保持对 React 的好奇，我们下篇见！