JSX：JavaScript的XML

和风中看海2024-12-17 12:49

简介

JSX是一种JavaScript的语法扩展，它允许你在JavaScript代码中写类似于HTML的标记。它被React框架广泛使用，以声明式地描述UI组件。JSX最终会被编译成JavaScript对象。

为什么使用JSX？

可读性：JSX使得组件的结构更加清晰，代码更易于阅读。
组件重用：JSX支持组件化开发，可以轻松重用UI组件。
集成JavaScript逻辑：JSX允许你将JavaScript逻辑直接嵌入到UI中，减少了模板和逻辑之间的切换。

基本语法

表达式

JSX本质上是JavaScript的语法糖，所以你可以在里面使用JavaScript表达式：

jsx 复制代码

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

组件

JSX可以表示React组件：

jsx 复制代码

const element = <Welcome name="Kimi" />;

条件渲染

你可以使用JavaScript的逻辑来决定是否渲染某些元素：

jsx 复制代码

const element = (
  <div>
    {isLoggedIn ? <LogoutButton /> : <LoginButton />}
  </div>
);

列表和键

JSX也支持列表渲染，并且需要为列表中的每个元素提供一个唯一的key属性：

jsx 复制代码

const element = (
  <ul>
    {messages.map((message) => (
      <li key={message.id}>{message.text}</li>
    ))}
  </ul>
);

JSX转换

JSX代码不会被浏览器直接执行，它需要通过Babel这样的编译器转换成JavaScript代码。Babel会将JSX转换成React.createElement()函数调用。

jsx 复制代码

// 输入（JSX）
const element = <h1 className="greeting">Hello, world!</h1>;

// 输出（转换后的JavaScript）
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

注意事项

camelCase属性：在JSX中，所有的属性名应该是camelCase而不是HTML中的kebab-case。
自闭合标签 ：在JSX中，自闭合标签需要以/>结束。
样式：JSX中的样式需要以JavaScript对象的形式传递，而不是字符串。

结论

JSX提供了一种强大的方式来描述UI，使得React组件的开发更加直观和高效。通过将UI结构和逻辑紧密结合，JSX让开发者能够以声明式的方式构建复杂的用户界面。