🤯 JSX：前端界的“变形金刚”，让你的代码像搭积木一样丝滑！

answerball
847 阅读5分钟

引言

700.gif

各位前端的小伙伴们，大家好呀！👋 今天咱们不聊那些枯燥的理论，来聊点刺激的——JSX！ 相信大家都对 React 和 Vue 框架有所耳闻，它们就像前端界的两大“武林门派”，各有所长。而 JSX，就是它们手中最犀利的武器之一。

🥊 为啥要学 React？

在开始深入 JSX 之前，我们先来简单聊聊为啥要学习 React。

  • 组件化开发：  React 的核心思想就是“组件化”。就像乐高积木一样，把页面拆分成一个个独立的组件，然后像搭积木一样组装起来。这种方式让代码结构更清晰，复用性更高，开发效率也嗖嗖的。🚀
  • 大厂必备：  React 诞生于 Facebook，在大厂中应用广泛。如果你想进大厂，React 是必备技能之一。而且，在 AIGC 时代，全栈工程师的需求越来越大，而 React 在国际上的影响力也更大一些。
  • UI 组件工程：  React 非常适合构建复杂的 UI 界面，它强大的组件化能力和灵活的生态系统，让你能轻松应对各种复杂的 UI 需求。

当然，Vue 也很棒！Vue 在国内社区很火爆，上手也更快。很多大厂也在同时使用 Vue 和 React，因为它们各有优势。我们这里主要聊的是 JSX，所以就先以 React 为例啦！😉

🤔 JSX 是个啥玩意？

JSX，全称 JavaScript XML，是一种在 JavaScript 代码中编写类似 HTML 结构的语法。 你可以理解为“在 XML 里面写 Javascript” 。听起来是不是有点酷炫？ 😎

// 这是一个 JSX 的简单例子
let myTitle = <h1>Hello, world!</h1>;

有没有感觉它长得很像 HTML？没错，它就是让你在 JavaScript 代码中写 HTML，但它可不是简单的字符串！JSX 实际上会被编译成 JavaScript 代码，然后被浏览器执行。

小 Tips:  就像我们用乐高积木搭建房子一样，JSX 让你用组件构建 UI 界面。

🚀 JSX 的优势：

那么，JSX 到底有什么优势呢？

  1. 更强大的组件表达能力:  相比于 Vue 的模板语法，JSX 更灵活，你可以像写普通 JavaScript 代码一样编写组件，代码逻辑和 UI 模板可以随时互动。

    • 在 Vue 中，我们通常使用 .vue 文件，将 template、script 和 style 分开，这种方式虽然清晰，但有时候会觉得它们之间有点割裂，不够紧密。而 JSX 则可以将逻辑和模板紧密结合，就像一个整体一样，非常方便。
    • vue 偏向好理解的api v-if v-for react jsx基于js，能不要api 就不要api 这句话说得很有道理！Vue 提供了一些 v-if、v-for 这样的指令，虽然方便易懂，但 JSX 更倾向于用原生的 JavaScript 逻辑来处理 UI，更灵活更强大。

  2. 开发效率更高:  JSX 代码和 JavaScript 代码结合更紧密，减少了 context switching ，减少了思维的跳跃。你无需在 template、script 和 style 之间来回切换，可以更专注于代码逻辑。

  3. JSX 是基于 JavaScript 的：  意味着你可以像使用其他 JavaScript 代码一样使用 JSX。这使得 JSX 代码更具可扩展性和可维护性。

  4. Fragment 的妙用：

  • “标签包裹”的奥秘：你可能注意到了，JSX 中最外层必须有一个根元素。但有时我们又不想增加额外的 DOM 节点，这时候，Fragment 就派上用场啦！它就像一个“隐形”的容器，用来包裹你的子节点，但不会在 HTML 中留下任何痕迹。就像我们用一个透明的盒子装东西，既能装东西，又不影响整体美观。
  • Fragment 节点是如何实现的？  实际上，React 使用的是 document.createDocumentFragment() 这个 API，它创建一个“文档碎片”，这个碎片就像一个容器，可以容纳很多子节点，但是不会被浏览器渲染到页面上。只有当你把碎片添加到 DOM 中时，它才会一起被渲染。
  • Fragment 对性能的贡献？  为什么 Fragment 对性能有帮助呢？ 如果我们直接操作 DOM 来添加很多节点，浏览器会多次重新渲染页面（重排和重绘），会比较消耗性能。而如果我们先把这些节点放到 Fragment 里面，再把 Fragment 添加到 DOM 中，浏览器就只会渲染一次，大大提高性能。
// 使用 Fragment 的 JSX
 <>
    <p>hello</p>
    <p>world</p>
  </>
  • 小 Tips:  Fragment 就像一个“隐形”的容器，可以容纳很多子节点，但是不会被渲染到 HTML 页面上，就像一个透明的容器，既能装东西又不影响整体美观。

💡 Vue 也能用 JSX？

是的，你没听错！Vue 也支持 JSX 语法，你可以用 @vitejs/plugin-vue-jsx 这个插件来在 Vue 项目中使用 JSX。这使得你可以享受到 JSX 的灵活性和强大功能，又能利用 Vue 的响应式系统。

配置你的 Vue + JSX 项目

在你的 vite.config.js 中添加如下配置:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

在 Vue 组件中使用 JSX

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HelloJsx',
  props: {
    msg: String,
  },
  setup(props) {
    return () => (
      <div class='hello'>
        <h1>{props.msg}</h1>
        <p>Welcome to our Vite + Vue + Jsx Component</p>
      </div>
    )
  },
});

小 Tips:  defineComponent是 Vue3 中定义组件的函数，就像给组件加个“身份证”。

🛠️ Vite 工程化套件

我们用到的 vite 工程化套件是非常好用的，可以帮我们快速构建和开发前端项目，它包含了 vue 和 vue-jsx 这两个插件，可以让我们在 Vite 项目中无缝使用 Vue 和 JSX。

总结

JSX 是一种强大且灵活的语法，它可以让你在 JavaScript 代码中直接编写类似 HTML 的结构。它不仅提高了组件的表达能力和开发效率，而且结合 Fragment 的特性，还能提高性能。无论你是在使用 React 还是 Vue，都可以尝试一下 JSX，相信你会爱上它的！💖

希望这篇博客能让你对 JSX 有一个更清晰的认识。如果你有任何问题或者想法，欢迎在评论区留言，我们一起交流学习！ 😉

20200229174423_bzukt.jpg

avatar
文章
阅读
粉丝