标签： jsx

发布于

解析 `JSX-runtime`：为什么 React 17+ 不需要显式 `import React`？探讨 `_jsx` 函数的调用成本

各位同仁，各位技术爱好者，大家下午好！ 今天，我们齐聚一堂，将深入探讨一个在现代React开发中看似微小、实则影响深远的变革：JSX-runtime。这个概念自React 17版本引入以来，彻底改变了我们编写JSX的方式，最显著的特点就是我们不再需要显式地在每个使用了JSX的文件顶部 import React。这背后的机制是什么？它带来了哪些好处？以及，最关键的问题之一，引入新的 _jsx 函数调用是否会带来额外的性能成本？这些都是我们今天讲座的重点。 我们将从JSX的传统转换模式开始，追溯到它最初的形态，然后逐步揭示 JSX-runtime 的演进过程，剖析 _jsx 和 _jsxs 这两个核心函数的内部工作原理，探讨其配置与兼容性，并最终对它们的调用成本进行一次深入的性能分析。 一、告别传统的JSX转换模式：历史回顾 在React 17版本之前，JSX的转换方式是相对固定的。每当我们编写一段JSX代码，比如一个简单的 <div>Hello</div>，构建工具（通常是Babel）会将其转换成对 React.createElement 方法的调用。 让我们看一 …

继续阅读“解析 `JSX-runtime`：为什么 React 17+ 不需要显式 `import React`？探讨 `_jsx` 函数的调用成本”

发布于

Vue 3对JSX/TSX的支持：类型检查与VNode创建函数的类型安全封装

Vue 3 对 JSX/TSX 的支持：类型检查与 VNode 创建函数的类型安全封装 大家好，今天我们来深入探讨 Vue 3 对 JSX/TSX 的支持，重点关注类型检查以及 VNode 创建函数的类型安全封装。JSX/TSX 允许我们在 JavaScript/TypeScript 中使用类似 HTML 的语法来描述 UI，这在复杂组件的开发中可以提高代码的可读性和可维护性。Vue 3 针对 JSX/TSX 做了大量优化，使其能够更好地与 TypeScript 集成，提供更强大的类型检查能力。 为什么选择 JSX/TSX？ 首先，我们简单回顾一下为什么要在 Vue 中使用 JSX/TSX。 声明式 UI： JSX/TSX 让我们能够以声明式的方式描述 UI，代码更贴近最终的渲染结果，易于理解。 组件化： JSX/TSX 天然支持组件化，可以方便地将 UI 拆分成独立的、可复用的组件。 类型安全： 配合 TypeScript，JSX/TSX 可以提供强大的类型检查，减少运行时错误。 可读性： 对于复杂的 UI 结构，JSX/TSX 比传统的模板语法更具可读性。 Vue 3 对 JSX/ …

继续阅读“Vue 3对JSX/TSX的支持：类型检查与VNode创建函数的类型安全封装”

发布于

Vue 3中的JSX/TSX支持：VNode创建函数的转换与属性/事件绑定机制

Vue 3 中 JSX/TSX 的深度剖析：VNode 创建转换与属性事件绑定 大家好！今天我们来深入探讨 Vue 3 中 JSX/TSX 的支持，重点关注 VNode 创建函数的转换过程，以及属性和事件绑定的机制。JSX/TSX 作为一种简洁高效的 UI 描述方式，在 Vue 3 中得到了良好的支持，理解其底层原理对于提升开发效率和解决复杂问题至关重要。 1. JSX/TSX 的优势与意义 JSX (JavaScript XML) 允许我们在 JavaScript 代码中编写类似 HTML 的结构，而 TSX 是 TypeScript 对 JSX 的扩展，提供了类型检查的支持。在 Vue 3 中使用 JSX/TSX 有以下优势： 简洁直观： 使用类似 HTML 的语法，更易于阅读和维护。 类型安全： TSX 提供了类型检查，减少运行时错误。 组件化： 可以方便地创建和组合组件。 更好的 IDE 支持： 许多 IDE 提供了 JSX/TSX 的语法高亮、自动补全等功能。 总的来说，JSX/TSX 能够提高 Vue 组件的开发效率，提升代码质量，尤其是在大型项目中，其优势更加明显。 2. …

继续阅读“Vue 3中的JSX/TSX支持：VNode创建函数的转换与属性/事件绑定机制”

发布于

JavaScript内核与高级编程之：`JSX`编译：`Babel`如何将`JSX`语法转换为`React.createElement`。

大家好，我是你们的老朋友，今天咱们来聊聊一个前端圈里人人都知道，但可能又有点迷糊的东西：JSX。 别怕，JSX 听起来高大上，实际上就是个语法糖，让你写 React 组件的时候更爽的玩意儿。但是，浏览器可不认识 JSX 啊，所以需要一个翻译官，把 JSX 翻译成浏览器能懂的 JavaScript 代码。这个翻译官，就是 Babel。 今天，咱们就来扒一扒 Babel 是如何把 JSX 变成 React.createElement 的，顺便也让你对 JSX 的底层原理有个更清晰的认识。准备好了吗？Let’s dive in! 第一幕：JSX 是个啥？ 首先，咱们得搞清楚 JSX 到底是个什么东西。简单来说，JSX 就是 JavaScript 的一个扩展语法，允许你在 JavaScript 代码里写类似 HTML 的标签。 比如： const element = ( <h1> Hello, world! </h1> ); 这看起来像 HTML，但实际上它是一个 JavaScript 表达式，最终会被转换成 JavaScript 代码。 JSX 的好处在于 …

继续阅读“JavaScript内核与高级编程之：`JSX`编译：`Babel`如何将`JSX`语法转换为`React.createElement`。”

发布于

Vue 3源码极客之：`Vue`的`JSX/TSX`：`@vue/babel-plugin-jsx`的实现。

各位观众老爷，晚上好！我是你们的老朋友，今天咱们来聊聊Vue 3里那个让人又爱又恨的JSX/TSX，以及它背后的功臣——@vue/babel-plugin-jsx。别害怕，虽然听起来高大上，但咱们会用最接地气的方式把它扒个精光。 开场白：JSX/TSX，你真的了解吗？ 首先，我们要明确一个概念：JSX/TSX 并不是 Vue 独有的，它最早来自 React。简单来说，它们是一种在 JavaScript/TypeScript 代码中编写 HTML 结构的语法糖。 JSX: JavaScript XML，顾名思义，就是用 XML 的形式来写 JavaScript。 TSX: TypeScript XML，则是 JSX 的 TypeScript 版本，增加了类型检查。 在 Vue 中使用 JSX/TSX，我们可以直接在组件的 render 函数里写 HTML 标签，而不用像以前那样使用模板字符串或者 h 函数。 为什么要用 JSX/TSX？ 这个问题就好比，为什么要用汽车而不是马车？各有优缺点，看你具体需求。 特性 JSX/TSX 模板 (Template) 灵活性 非常灵活，可以使用完整的 …

继续阅读“Vue 3源码极客之：`Vue`的`JSX/TSX`：`@vue/babel-plugin-jsx`的实现。”

发布于

Vue 3源码极客之：`Vue`的`JSX/TSX`编译：如何将`JSX`转换成`Vue`的`render function`。

各位靓仔靓女，欢迎来到今天的“Vue 3 源码极客之 JSX/TSX 编译：如何将 JSX 转换成 Vue 的 render function” 讲座！ 我是你们的老朋友，今天就带大家一起扒一扒 Vue 3 里面 JSX/TSX 编译的那些事儿，保证让你们听完之后，不仅能用 JSX/TSX 撸代码，还能知道它背后是怎么运作的，成为真正的 “懂王”！ 一、 啥是 JSX/TSX？为啥 Vue 要支持它？ 首先，咱们得搞清楚，JSX/TSX 是个啥玩意儿？ 简单来说，JSX 是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码里写 HTML 标签。 比如： const element = <h1>Hello, JSX!</h1>; TSX 呢，就是 JSX 加上了 TypeScript 的类型检查，让你的代码更健壮。 那为啥 Vue 要支持 JSX/TSX 呢？ 原因很简单，就是为了让开发者更爽！ 代码可读性更高： JSX 让你直接在 JS 代码里写 HTML 结构，一目了然，不用像 template 那样，还得跳来跳去。 组件化更方便： …

继续阅读“Vue 3源码极客之：`Vue`的`JSX/TSX`编译：如何将`JSX`转换成`Vue`的`render function`。”

发布于

Vue 3源码深度解析之：`Vue`的`JSX/TSX`：如何将`JSX`编译成`VNode`。

大家好，我是老码，今天咱们聊聊 Vue 3 里的 JSX/TSX，以及它怎么变成 VNode 的魔法。 各位观众老爷，晚上好！我是老码，一个在代码堆里摸爬滚打多年的老兵。今天咱们不聊虚的，直接来点硬货：Vue 3 里的 JSX/TSX，以及它背后的编译原理。 说起 Vue，大家肯定对它的模板语法不陌生。但有时候，模板写起来就感觉有点束手束脚，尤其是遇到复杂的逻辑。这时候，JSX/TSX 就闪亮登场了！它允许我们用更接近 JavaScript 的语法来描述 UI，写起来更灵活，也更符合程序员的口味。 那么问题来了：浏览器只能理解 HTML、CSS 和 JavaScript，JSX/TSX 又是怎么变成浏览器能识别的东西的呢？答案就是：编译器！它负责把 JSX/TSX 翻译成 Vue 能够理解的 VNode (Virtual DOM Node)。 1. JSX/TSX 是个啥？ 先来简单介绍一下 JSX/TSX。JSX 是一种 JavaScript 的语法扩展，允许你在 JavaScript 代码里书写类似 HTML 的标签。而 TSX，顾名思义，就是 TypeScript 版本的 JSX …

继续阅读“Vue 3源码深度解析之：`Vue`的`JSX/TSX`：如何将`JSX`编译成`VNode`。”