如何在 Vue 中使用 JSX 以及使用它的原因

译者：前端小智

来源： https://scotch.io/

Vue.js 具有简单的 API 和几个选项，可用于在我们的组件中定义HTML模板。

我们可以使用 标签选项，在根组件实例上定义 template 属性，或者使用单文件组件。

上面的选项很棒并且可以完美地工作，但是，在您的应用程序的生命周期中，有时会感到笨拙，设计过度或非常不灵活。

那么，我们为什么要使用 JSX 而不是其他模板定义呢？

• JSX 更易读，

  的写法一看就是比 this.$createElement('div', {}, [...]) 简洁很多。

• JSX 也是 JavaScript。
• Vue支持JSX。
• JSX 使自定义 Vue 组件更容易导入和管理。

简介

先举一个例子来说明为什么 JSX 是好的。

我们要构建一个 组件，该组件可以是普通的单行文本输入或多行输入（文本区域）。 我们的模板声明可能看起来像这样。

      
 </div></pre>
<p> 从上面的代码片段中可以看到，我们很快就会遇到一些问题，比如重复代码等等。想象一下，必须支持 <code>input</code> 上面所列的各种属性。上面的这个小片段将会增长并成为一个难以维护的噩梦。 </p>
<p>要解决这个问题，我们需要使用Vue进行降级处理，因此需要使用理接近Vue的内部API来解决这个问题。</p>
<h2>render() 方法</h2>
<p> 注意:这里并不是说没有JSX就没有一种简单的方法来处理上面的问题，只是说将这个逻辑移动到带有JSX的 <code>render()</code> 方法可以使组件更直观。 </p>
<p> 我们在 Vue 中创建的每个组件都有一个 <code>render</code> 方法。这个就是 Vue 选择渲染组件的地方。即使我们不定义这个方法，Vue 也会为我们做这件事。 </p>
<p> 这意味着当我们在 Vue 中定义 HTML 模板时，Vue 的模板编译器将其编译为一个 <code>createElement</code> 函数，该函数带有几个参数并从 <code>render</code> 函数返回结果。 </p>
<p> 为了修复上一节中的代码，我们删除了 <code>template</code> 属性或 <code>template</code> 标签，并在组件上定义了 <code>render()</code> 方法。 如果在组件上定义了 <code>render</code> 方法，则 Vue 将忽略 <code>template</code> 定义。 </p>
<pre>...
 export default {
     name: 'TextField',
     render (createElement) {
         const tag = this.multiline ? 'textarea' : 'input'

        return createElement(tag, {
             class: {
                 'text-input': true,
                 'is-disabled': false
             },
             attrs: {
                 name: this.name,
                 placeholder: this.placeholder,
                 'aria-invalid': false
             }
         })
     } 
 }
...</pre>
<p>上面的代码做了几件事：</p>
<ol>
<li> <code>render</code> 方法从Vue获取一个 <code>createElement</code> 助手。 </li>
<li>我们以编程方式定义我们的标签。</li>
<li> 然后，我们创建标签并将其属性，类等作为对象传递。 我们可以传递给 <code>createElement</code> 的 <a href="https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth" rel="nofollow,noindex" target="_blank">选项</a> 很多。 </li>
<li>我们返回新创建的元素进行渲染。</li>
</ol>
<p> 我们为 Vue 组件定义的每个模板都将转换为可返回 <code>createElement</code> 函数的 <code>render</code> 方法。 因为这个原因， <code>render</code> 方法将优先于模板定义。 </p>
<p>举个例子：</p>
<pre>// HTML
<div>
  <p>Only you can stop forest fires
</div></pre>
<p>模板编译器将把上面的 HTML 转换成:</p>
<pre>...
render (createElement) {
  return createElement(
    'div',
    {},
    createElement(
      'p',
      {},
      'Only you can stop forest fires'
    )
  )
}
...</pre>
<p>现在你可能会问这个问题：“对可读性来说这不好吗？” 答案是肯定的。 一旦定义了具有许多元素嵌套级别或具有多个同级元素的组件，我们就会遇到这个新问题。</p>
<p>这就是 JSX 出现的原因，它可以很好的解决此类问题。</p>
<h2>JSX 是什么</h2>
<p>JSX 是 Facebook 工程团队创造的一个术语。</p>
<p>JSX 是 JavaScript 的类似XML的语法扩展，没有任何定义的语义。</p>
<p>JSX 不打算由引擎或浏览器实现。相反，我们将使用 Babel 之类的转置器将JSX转换成常规的 JS 。</p>
<pre>// 此行是JSX的示例
const heading = <h1>Welcome to Scotch</h1>;</pre>
<p>基本上，JSX 允许我们在 JS 中使用类似 Html 的语法。</p>
<h2>配置 Vue 以使用 JSX</h2>
<p>如果使用的 Vue-cli 大于或等于 3.0 版本，那么就直接可以使用JSX的语法了。</p>
<p> 如果您使用的是不支持 JSX 的Vue-cli较旧版本，则可以通过安装 <code>babel-preset-vue-app</code> 来添加它，并将其添加到您的 <code>.babelrc</code> 文件中。 </p>
<pre># Using npm
 npm install --save-dev babel-preset-vue-app

# Using yarn
 yarn add --dev babel-preset-vue-app</pre>
<p> 在 <code>.babelrc</code> 文件中，添加： </p>
<pre>{
 "presets": ["vue-app"]
}</pre>
<p> 我们现在可以在组件的 <code>render</code> 函数中使用 JSX。 </p>
<h2>在 Vue 中使用 JSX 需要注意的地方</h2>
<p>在 Vue 中使用JSX需要注意几点。</p>
<p> 要监听 JSX 中的事件，我们需要 <code>“on”</code> 前缀。 例如，将 <code>onClick</code> 用于单击事件。 </p>
<pre>render (createElement) {
     return (
         <button></button>
     )
 }</pre>
<p>要修改事件，请使用</p>
<pre>render (createElement) {
     return (
         <button></button>
     )
 }</pre>
<p> 绑定变量，注意这里不是使用 <code>:</code> </p>
<pre>render (createElement) {
     return (
         <button></button>
     )
 }</pre>
<p> 将HTML字符串设置为元素的内容，使用 <code>domPropsInnerHTML</code> 而不是使用 <code>v-html</code> </p>
<pre>render (createElement) {
     return (
         <button></button>
     )
 }</pre>
<p>我们也可以展开一个大对象：</p>
<pre>render (createElement) {
     return (
         <button></button>
     )
 }</pre>
<h2>在 render 中使用JSX</h2>
<p> 回到我们最初的 <code>“TextField”</code> 组件。现在我们已经在 Vue 应用程序中启用了 JSX，我们现在可以这样做了。 </p>
<pre>render (createElement) {
     const inputAttributes = {
         class: 'input-field has-outline', // class definition
         onClick: this.handleClick // event handler
         backdrop: false // custom prop
     }
     const inputMarkup = this.multiline
         ? <textarea>
         : 


    return inputMarkup
 }

导入 Vue JS 组件

在 Vue 中使用JSX的另一个好处是，我们不再需要注册所需的每个组件。 我们只是导入和使用。

import {Button} from '../components'

export default {
     render (createElement) {
         return Edit
     }
 }

如何使 JSX 与 TypeScript 一起使用

TypeScript 用作一种向 JavaScript添加类型检查的机制。要在 JSX 支持 TypeScript中，需要修改 tsconfig.json 。

要在 TypeScript 中启用 JSX，请先将该文件另存为 .tsx 文件，然后将 tsconfig.json 修改为包括：

{
   "compilerOptions": {
     ....
     "jsx": "preserve",
   }
 }

将 jsx 选项设置为 “preserve” 意味着 TypeScript 不应处理JSX。 这样做使 Babel 可以控制所有JSX 和 TypeScript 坚持使用类型，因为它尚不支持 Vue JSX。

然后在项目中创建一个 jsx.d.ts 文件，并为 Vue 添加 TypeScript JSX 声明。

import Vue, {VNode} from 'vue'

declare global {
   namespace JSX {
     interface Element extends VNode {}
     interface ElementClass extends Vue {}
     interface ElementAttributesProperty {
       $props: {}
     }
     interface IntrinsicElements {
 [elemName: string]: any
     }
   }
 }

确保 TypeScript 可以加载声明文件。 或者，可以通过以下方式在 tsconfig.json 中为其添加自动加载功能：

{
   "compilerOptions": {
     ...
     "typesRoot": ["./node_modules/@types", "./types"]
   }
 }

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug 。

原文： https://scotch.io/tutorials/u…

交流

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复 福利 ，即可看到福利，你懂的。