React18的JSX和Babel解析器

img

什么是 JSX

React JSX 是一种 JavaScript 语法扩展，它允许开发者在 JavaScript 代码中直接编写类似 HTML 的代码，并在运行时将其转换为 React 元素。

JSX 的主要优点是它可以让我们在组件中更加直观地表达 UI 结构，HTML的声明式模版写法提高了JS的可编程能力

img

在运行的时候 React 会将图中的 JSX 代码转换为一个 React 元素对象.

JSX的本质

在上面也说了JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能 在浏览器中运行需要借助 Babel 解析器

前往中文文档看看是什么东西 点击前往 https://www.babeljs.cn/

点击页面当中的在线工具,我们进行在线的调试看看 JSX 经过解析器是什么效果

img

勾选 React 语言

左边 这里是写 React JSX 代码,右边是解析出浏览器运行的代码

img

img

我们在 JSX 当中编写了一个 Span 标签

/*#__PURE__*/ 是一个特殊的注释，它告诉 Babel 不要将这个 JSX 元素标记为纯元素

这个注释是可选的，但是在某些情况下，它可以帮助减小打包后的代码体积。

_jsx 是一个函数，它是 React JSX 的内部实现，它接受两个参数：第一个参数是元素的类型，第二个参数是元素的属性对象

元素类型是 span，属性对象包含一个 children 属性，它的值是字符串 我是Span

const element = React.createElement("span", { children: "我是Span" });

JSX中使用JS表达式

在 JSX 里面它是用 大括号语法 来识别 javaScript 里面的表达式的.在 JSX 中，我们可以使用大括号语法 {}来包含 JavaScript 表达式。以下是一些常见的 JSX 示例：

1. 插入变量：

const name = "yby6";
const element = <h1>Hello, {name}!</h1>;

img

1. 调用函数：

function formatDate(date) {
  return date.toLocaleDateString();
}

const date = new Date();
const element = <p>Today is {formatDate(date)}.</p>;

img

1. 调用方法：

class User {
  getName() {
    return "John";
  }
}

const user = new User();
const element = <h1>Hello, {user.getName()}!</h1>;

img

前面我们第一点就提到了在 JSX 中使用 JavaScript 表达式时，我们需要将表达式包裹在大括号中 {}

img

如果我不把表达式包裹在大括号中呢?

我们定义了一个 JSX 语法但是没有使用大括号解析变量那么它就不会生效

const name = "杨不易呀";
const element = <h1>Hello, name!</h1>; // 错误示例

function formatDate(date) {
  return date.toLocaleDateString();
}

const date = new Date();
const element = <p>Today is formatDate(date).</p>; // 错误示例

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗