React前端面试每日一试 2.JSX是什么?JSX如何工作?

JSX是什么？

JSX（JavaScript XML）是React引入的一种语法扩展，用于在JavaScript中编写类似HTML的结构。它让我们能够直观地描述UI的结构，同时保留JavaScript的编程能力。尽管JSX看起来像HTML，但它最终会被编译成标准的JavaScript代码。

JSX如何工作?

我的理解JSX其实本质是一种语法糖,它会被编译器(比如Babel)转换成功React.createElement方法调用.
工作流程如下:

1. 编写JSX代码：开发者使用JSX语法编写React组件的UI结构。
2. 编译JSX代码：在构建过程中，Babel等工具将JSX代码转换成React.createElement调用。
3. 创建虚拟DOM元素：React.createElement返回一个描述UI结构的JavaScript对象，即虚拟DOM(react虚拟DOM在上一个问题提到过,不太了解虚拟DOM可以查看上一试)。
4. 渲染到真实DOM：React根据虚拟DOM生成或更新真实DOM，最终呈现给用户。

以上就是我们使用JSX实际的工作流程

示例代码

JSX代码

import React from 'react';const element = <h1>Hello, world!</h1>;

通过Babel的编译得到

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

这里createElement方法接受三个参数:
1.表示要创建的元素类型(type),如div,span等等
2.包含该元素的属性(props),如className,id等等
3.该元素的子节点(children),如文本、其他元素或数组

高级用法示例

嵌入表达式：可以在JSX中嵌入任意的JavaScript表达式，使用花括号{}包裹。

const user = {firstName: 'Harper',lastName: 'Perez'
};const element = <h1>Hello, {user.firstName} {user.lastName}!</h1>;

条件渲染：可以使用条件运算符在JSX中实现条件渲染。

const isLoggedIn = true;const element = (<div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}</div>
);

列表渲染：可以使用数组的map方法在JSX中渲染列表。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =><li key={number.toString()}>{number}</li>
);const element = (<ul>{listItems}</ul>
);

总结

JSX是React中用于描述UI结构的一种语法糖,通过编译器转换为React.createElement方法调用,然后创建对应的虚拟DOM,通过生成或更新最终生成真实DOM.
它的优势在于简洁、直观和强大的表达能力，使得构建复杂的用户界面变得更加容易和高效。