JSX 简介

JSX 是 JavaScript 的扩展语法,它允许你在 JavaScript 代码中编写类似 HTML 的标记。JSX 是 React 的核心特性之一。

为什么使用 JSX?

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合,比如事件处理和状态变化等。React 没有将标记和逻辑分离到不同的文件,而是将它们一起包含在称为组件的松散耦合单元中。

JSX 的基本语法

1. 类似 HTML 的语法

JSX 看起来很像 HTML,但它实际上是 JavaScript 的语法扩展。

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

2. 嵌入表达式

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

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

3. JSX 也是表达式

JSX 本身也是一个表达式,编译后会得到 JavaScript 对象。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX 的特性

1. 指定属性

使用引号来指定字符串字面量作为属性值,或者使用大括号来嵌入 JavaScript 表达式。

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

2. JSX 表示对象

Babel 会将 JSX 编译为 React.createElement() 调用。

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

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

注意事项

• React DOM 使用 camelCase (驼峰式) 命名来定义属性的名称,而不是使用 HTML 属性名称的命名约定
• JSX 中的 class 变成了 className
• 自闭合标签必须包含斜杠: <div />

下一步

学习 JSX 基础后,继续了解组件嵌套。