面试题-React(三)：什么是JSX？它与常规JavaScript有什么不同？

在React的世界中，JSX是一项引人注目的技术，它允许开发者在JavaScript中嵌套类似HTML的标签，用于描述UI组件的结构。本篇博客将通过丰富的代码示例，深入探索JSX语法，解析其在React中的用法和优势。

一、JSX基础语法

在React项目中，你会经常看到类似HTML的代码块，这就是JSX。以下是一些常见的JSX语法示例：

基本元素：

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

表达式插值：

const name = "Alice";
const element = <p>Hello, {name}!</p>;

条件渲染：

const isLoggedIn = true;
const element = isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;

列表渲染：

const items = ['Apple', 'Banana', 'Orange'];
const list = (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

注释写法

{/* 这是注释 */}

书写规范

JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div元素，如：

const root = (
  <div>
    <h1>标题</h1>
    <div>内容</div>
  </div>
)

JSX中的标签可以是单标签，也可以是双标签，如果是单标签，必须以/>结尾;

const root = (
  <div>
    <h1>标题</h1>
    <br/>
    <div>内容</div>
  </div>
)

二、JSX插入不同类型的值

number/string/array直接显示

const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]

const root = (
  <div>
    <p>{number}</p>
    <p>{str}</p>
    <p>{arr}</p>
  </div>
)

null/undefined/boolean会显示为空

const number = 123
const str = "hello world"
const arr = ["red", "yellow", "blue"]
const nul= null,
const und= undefined,
const bool= true

const root = (
  <div>
    <p>{number}</p>
    <p>{str}</p>
    <p>{arr}</p>
    
    <p>{nul}</p>
    <p>{und}</p>
    <p>{bool}</p>

    <p>结尾</p>
  </div>
)

三、JSX与常规JavaScript的区别

1. 标签嵌套：

JSX允许在JavaScript中嵌套HTML标签，与常规JavaScript中操作DOM的方式相比，更加直观。

2. 插值表达式：

使用花括号{}将JavaScript表达式插入到JSX中，这使得动态渲染变得非常便捷。

3. 类名和属性命名：

在JSX中，使用className代替HTML中的class，使用htmlFor代替for，避免与JavaScript关键字冲突。

四、为何React使用JSX？

1. 可读性：

JSX语法类似HTML，使代码更易读、易懂，提高了开发团队的协作效率。

2. 简洁性：

JSX简化了创建React元素的过程，相比手动使用React.createElement，代码更加清晰简洁。

3. 静态类型检查：

配合静态类型检查工具（如TypeScript、Flow），JSX可以帮助开发者在编码时捕获类型错误。

4. 更自然的开发体验：

JSX让开发者可以在JavaScript中更自然地描述UI结构，类似于在HTML中编写代码。