React前端面试每日一试 2.JSX是什么?JSX如何工作?_前端面试之如何理解jsx-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42900858/article/details/140628156

JSX是什么？

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

JSX如何工作?

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

编写JSX代码：开发者使用JSX语法编写React组件的UI结构。
编译JSX代码：在构建过程中，Babel等工具将JSX代码转换成React.createElement调用。
创建虚拟DOM元素：React.createElement返回一个描述UI结构的JavaScript对象，即虚拟DOM(react虚拟DOM在上一个问题提到过,不太了解虚拟DOM可以查看上一试)。
渲染到真实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>
);