什么是 JSX
React JSX 是一种 JavaScript 语法扩展，它允许开发者在 JavaScript 代码中直接编写类似 HTML 的代码，并在运行时将其转换为 React 元素。
JSX 的主要优点是它可以让我们在组件中更加直观地表达 UI 结构，HTML的声明式模版写法提高了JS的可编程能力
在运行的时候 React 会将图中的 JSX 代码转换为一个 React 元素对象.
JSX的本质
在上面也说了JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能 在浏览器中运行需要借助 Babel 解析器
前往中文文档看看是什么东西 点击前往 www.babeljs.cn/
点击页面当中的在线工具,我们进行在线的调试看看 JSX 经过解析器是什么效果
勾选 React 语言
左边 这里是写 React JSX 代码,右边是解析出浏览器运行的代码
我们在 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 示例：
- 插入变量：
const name = "yby6";
const element = <h1>Hello, {name}!</h1>;
- 调用函数：
function formatDate(date) {
return date.toLocaleDateString();
}
const date = new Date();
const element = <p>Today is {formatDate(date)}.</p>;
- 调用方法：
class User {
getName() {
return "John";
}
}
const user = new User();
const element = <h1>Hello, {user.getName()}!</h1>;
前面我们第一点就提到了在 JSX 中使用 JavaScript 表达式时，我们需要将表达式包裹在大括号中 {}
如果我不把表达式包裹在大括号中呢?
我们定义了一个 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>; // 错误示例
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
