React与Vue的JSX(一)

自从2013年react正式宣布开源后，vue在同年也随之诞生了。在各自发展的过程中，vue可没少借鉴react的功能啊。现在随着Ai的发展越发壮大，之前国内vue的市场更大，现在react在国内愈发的火爆了起来。为什么这样呢？

react 诞生于Facebook。在一些复杂业务上, 大厂喜欢用。

vue 国内社区很火，因为AIGC全栈, 国际的React 的更多些。

而JSX则是react中最漂亮的一部分，可以在函数中，以最简单的方式表达UI部分，这也是我们必须学的一部分内容，而现在vue把这个也给借鉴过去了。在国内目前依旧是vue的大方向，所以我们也要学习怎么在vue中使用jsp。

jsx是react 的优势和特点之一, 相比于vue 提升了组件的表达能力和开发效率代码逻辑和template 随时互动, 而不像vue 三段式 template script 割裂了。

vue偏向好理解的api 像v-if v-for。react jsx 基于js 能不要api 就不要api

实战

话不多说，直接开始实战，我们先来讲讲react的传统用法。我们先讲react中的一个概念，在react中，组件就是一个函数，而函数返回值就是一个JSX,让我们看一个简单的例子。

javascript 复制代码

function App() {
 // js函数区域 里编写html
 let myTitle =<h1>Hello World</h1>;
 return (
    <div>
    {myTitle}
    </div>
 )
}

export default App

此时我们得到

但是如果我们把代码改成这样:

javascript 复制代码

function App() {
  return (
    <p>hello</p><p>world</p>
  )
}

此时我们惊奇的发现，程序报错了这样写不应该没问题吗？

这里说，必须要一个enclosed tag。也就是说

在JSX的最外层，只能有且必须有一个节点,唯一的标签包住所有标签可以作为其他节点的容器,所以想要正常的运行，我们应该在他的内容外面，包裹一个标签就可以了。此时代码就变成了

javascript 复制代码

function App() {
  return (
  <div>
    <p>hello</p><p>world</p>
  </div>
  )
}

此时就正常运行了：

上面卖了个关子,他都提示我们了，是否需要一个JSX fragment,而我们先用了个div标签。不用急不用慌，这就来讲fragment，只需要把div标签换为<>标签即可。

来到div标签，此时我们的源码显示是这样的：

改成fragment之后，则变成了这样：

我们可以看到换位fragment之后，挂载后没有污染我们的html，是由fragment节点实现的。让我们再来看一段源码来展示fragment的作用：

ini 复制代码

<div id="container"></div>
    <script>
        const container = document.getElementById('container')
    for(let i=0;i<100;i++){ // 100?
        const div = document.createElement('div') // 内存
        div.textContent =`Item ${i+1}`;
         container.appendChild(div)
    }

这是一个一般的用法，在这里，DOM操作了100次，极其消耗我们的性能，也非常不稳定，如果用上fragment呢?

xml 复制代码

    <div id="container"></div>
    <script>
        const container = document.getElementById('container')
        const fragment = document.createDocumentFragment() // 文档碎片 碎片节点, 容器
    for(let i=0;i<100;i++){ // 100?
        const div = document.createElement('div') // 内存
        div.textContent =`Item ${i+1}`;
        fragment.appendChild(div) // 内存
    }
    container.appendChild(fragment) // v8 -> 渲染只做了
    </script>

改为fragment后，把我们的一百次操作都先存储到其中，后面一次提交给container，这样我们的渲染就只做了一次，显著的提升了我们的性能。

vue中的jsx

那么在vue中，怎么支持jsx操作呢？其实也很简单，在我们的vue项目的package.json文件中的devDependencies下添加 "@vitejs/plugin-vue-jsx":"^4.1.1" 就可以了，然后在我们的 vite.config.js文件中引入一下vueJsx就可以了

css 复制代码

import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
})

这样我们就可以在vue项目中使用jsx了。让我们写个代码实验一下。

javascript 复制代码

// vue 中使用jsx语法
import{
    defineComponent, // vue3 申明组件的函数
} from "vue";

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

在App.vue文件中导包和添加 HelloJSX msg="Hello from JSX!" 的信息

我们得到：

完美实现功能。

这就是jsx在react和vue中的使用，希望能从中收获。