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

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

一、JSX基础语法

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

1. 基本元素：

const element = 
Hello, JSX!
;

2. 表达式插值：

const name = "Alice";
const element = 
Hello, {name}!
;

3. 条件渲染：

const isLoggedIn = true;
const element = isLoggedIn ? 
Welcome back!
 : 
Please log in.
;

4. 列表渲染：

const items = ['Apple', 'Banana', 'Orange'];
const list = (
  

    {items.map(item => 
{item}
)}
  
);

5. 注释写法

{/* 这是注释 */}

6. 书写规范

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

const root = (
  

    
标题
    
内容
  
)

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

const root = (
  

    
标题
    

    
内容
  
)

二、JSX插入不同类型的值

1. number/string/array直接显示

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

const root = (
  

    
{number}
    
{str}
    
{arr}
  
)

2. 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 = (
  

    
{number}
    
{str}
    
{arr}
    
    
{nul}
    
{und}
    
{bool}

    
结尾
  
)

三、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中编写代码。