如何在Vue项目中使用JSX（） vue.js前端

Author：ManStruggling

什么是 JSX？
JSX是一种JavaScript和XML的结合，即JavaScript + XML = JSX，JSX源于Facebook，可以在JavaScript里写XML，因为这个特性，所以具备了JavaScript的灵活性，同时又兼具html的语义化和直观性
为什么使用 JSX？

jsx对比createElement函数可读性更强； VS this.$createElement('div', {...}, [...])
vue-cli3.0及以上默认支持jsx语法
jsx可以使vue组件更容易导入和管理

首先来横向对比一下模板语法、createElement函数、jsx三种渲染方式
栗子一 template模板语法

使用最多，不做解释

一些文本Only you can stop forest fires span text b tag

createElement

createElement函数实际上创建的是Virtual Node，创建VNode树，一旦Dom树的结构复杂，dom节点属性太多，势必会造成可读性差的问题。。。

render(h) { return h( "div", { attrs: { id: "vnode", }, }, [ "一些文本", h( "p", { class: { bar: true, }, style: { color: "red", fontWeight: "bold", }, }, "Only you can stop forest fires" ), h("span", {}, "span text"), h("b", { domProps: { innerText: "b tag" } }), ] ); }

JSX

然后jsx就闪亮登场

render() { return (一些文本【如何在Vue项目中使用JSX（）】Only you can stop forest fires span text b tag); }

可能有的同学觉得，就这，跟template没什么区别呀。
这个案例只涉及到html没有涉及javascript，jsx是把javascript和html放在一起来书写的。所以看下个栗子
栗子二

根据type的值进行条件渲染，A、B、C三个模块，每个模块有自己的对应模块的代码，也有一些公共的模块，假设这些代码有很多行，势必会造成阅读性的降低。有人可能觉得如果这样的话，把公共代码抽离出一个单独的组件不就好了，这样使可以解决问题，如果这里的公共代码仅仅只在这一个文件内使用，别的文件不会对这些公共代码做引用呢，要不要考虑抽离公共组件的必要性呢，jsx就可以完美的解决这些问题。

template ，在template

...模块A的代码...公共代码...模块B的代码...公共代码...模块C的代码...公共代码

createElement

这里就不做createElement函数的说明了，想必也没有多少人用这个吧。。。。有的话，那你赢了

JSX

template模板代码超过三百行，就很难阅读了，会重复在VM、V层切换，所以在复杂的大型项目中建议用jsx来做render，提高代码的可阅读性

render() { // 提取公共模块代码 const renderCommon = () => ...公共代码; const renderA = () => (...模块A的代码 {renderCommon()}); const renderB = () => (...模块B的代码 {renderCommon()}); const renderC = () => (...模块C的代码 {renderCommon()}); return ({this.type === 0 ? renderA() : this.type === 1 ? renderB() : renderC()}); }

Usage

插槽和作用域插槽

// child.vue

组件直接引入使用，无需components注册，方便导入和管理
上述总结使用jsx的一些特殊情况，条件渲染、v-html、列表的渲染、事件的绑定、属性绑定、指令的使用、插槽和作用域插槽，聪明的你肯定可以看出来，使用jsx能像vue3的composition API一样把相同的逻辑代码聚合在一起，避免大型项目开发时，页面逻辑复杂导致代码量上升，option API在template和methods之间来回切换的问题。
第一次撰文，如有疑问，欢迎各位大佬斧正，希望大家能够STAR支持一下小编，希望小编的内容对大家有所帮助~
[TOC]